Mouse drag sorting Li or Table_jquery implemented by jquery

1. Front-end page

Copy code The code is as follows:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="拖动排序Li或Table.aspx.cs" Inherits="拖动排序Li或Table" %>

value="保存顺序" />

提示：按住鼠标拖动链接，之后单击保存按钮就可以完成对链接的排列

• id="sitelinks_text_96">
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  	[编辑]
  文章标题:	法国时代复分大占地方
  列表图片:	alt='法国时代复分大占地方' />
  文章URL:	http://www.uzai.com/trip/27879.html?46400284

  
  


• id="sitelinks_text_78">
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  	[编辑]
  文章标题:	医保结余7000亿花不出去 官员建议提高报销比例007
  列表图片:	alt='医保结余7000亿花不出去 官员建议提高报销比例007' />
  文章URL:	http://finance.sina.com.cn/china/20131202/011217492954.shtml

  
  


• id="sitelinks_text_94">
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  	[编辑]
  文章标题:	新浪科技“因你而变”:卡片式社交首页新版上线
  列表图片:	alt='新浪科技“因你而变”:卡片式社交首页新版上线' />
  文章URL:	http://tech.sina.com.cn/i/2013-12-02/00158965413.shtml

  
  


• id="sitelinks_text_91">
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  	[编辑]
  文章标题:	教授拒入普通病房：我的命十个人都换不来001
  列表图片:	alt='教授拒入普通病房：我的命十个人都换不来001' />
  文章URL:	http://news.sohu.com/20131202/n391116380.shtml

  
  


• id="sitelinks_text_79">
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  	[编辑]
  文章标题:	广东打击伪基站抓百人 首例案件开审9人批捕002
  列表图片:	alt='广东打击伪基站抓百人 首例案件开审9人批捕002' />
  文章URL:	http://tech.sina.com.cn/t/2013-12-02/01148965434.shtml

  
  


• id="sitelinks_text_81">
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  	[编辑]
  文章标题:	1男1女从南昌大学图书馆坠亡 女死者为该校学生003
  列表图片:	alt='1男1女从南昌大学图书馆坠亡 女死者为该校学生003' />
  文章URL:	http://news.sina.com.cn/s/2013-12-02/115128865820.shtml

  
  


• id="sitelinks_text_77">
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  	[编辑]
  文章标题:	河南车主遭罚服毒调查:每月办3000元月票可免罚004
  列表图片:	alt='河南车主遭罚服毒调查:每月办3000元月票可免罚004' />
  文章URL:	http://news.sina.com.cn/c/2013-12-02/023928862436.shtml

  
  


• id="sitelinks_text_82">
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  	[编辑]
  文章标题:	大学生见义勇为被连捅三刀 因家贫无钱医治(图)005
  列表图片:	alt='大学生见义勇为被连捅三刀 因家贫无钱医治(图)005' />
  文章URL:	http://news.sina.com.cn/s/2013-12-02/052028863120.shtml

  
  


• id="sitelinks_text_80">
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  	[编辑]
  文章标题:	676帽!韦德刷新盖帽纪录 前辈1100场他只用679场006
  列表图片:	alt='676帽!韦德刷新盖帽纪录 前辈1100场他只用679场006' />
  文章URL:	http://sports.sina.com.cn/nba/2013-12-02/10006913299.shtml

  
  


• id="sitelinks_text_83">
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  	[编辑]
  文章标题:	8岁大妈秀腹肌健壮,长相神秘还被曝已有两小孩008
  列表图片:	alt='8岁大妈秀腹肌健壮,长相神秘还被曝已有两小孩008' />
  文章URL:	http://net.chinabyte.com/442/12792942.shtml

  
  

2、CSS样式

[css] view plaincopy在CODE上查看代码片派生到我的代码片

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
ol,ul{list-style:none;}

a{color:#333;text-decoration:none;}
a:hover{color:#f30;text-decoration:underline}

body{font-family:"宋体",Arail,verdana;font-size:12px;line-height:1.5em;color:#222;background:#fff ;}


.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{display:block;}
* html .clearfix{height:1%;}
.clear{clear:both;}

/*文本对齐*/
.tr{text-align:right}
.tl{text-align:left;}
.tc{text-align:center;}

/*浮动*/
.fn-fl{float:left;}
.fn-fr{float:right;}

.m5{margin:5px;} .m10{margin:10px;}
.mt5 { margin-top:5px;}.mr5 { margin-right:5px;}.mb5 { margin-bottom:5px;}.ml5 { margin-left:5px;}
.mt10 { margin-top:10px;}.mr10 { margin-right:10px;}.mb10 { margin-bottom:10px;}.ml10 { margin-left:10px;}

.p5{padding:5px;} .p10{padding:10px;}
.pt5 { padding-top:5px;}.pr5 { padding-right:5px;}.pb5 { padding-bottom:5px;}.pl5 { padding-left:5px;}
.pt10 { padding-top:10px;}.pr10 { padding-right:10px;}.pb10 { padding-bottom:10px;}.pl10 { padding-left:10px;}

.mt30{margin-top:30px;}.mb30{margin-bottom:30px;}
.pt30{padding-top:30px;}.pb30{padding-bottom:30px;}

/*无效状态*/
input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly] {background-color: #eee;cursor: not-allowed;box-shadow:none;opacity:0.5}

/*下拉列表*/
select{border:1px solid #ccc;border-radius:3px;padding:1px 2px;}

/*输入框*/
input:-moz-placeholder,textarea:-moz-placeholder {color: #999999;}
input:-ms-input-placeholder,textarea:-ms-input-placeholder {color: #999999;}
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder {color: #999999;}

.txt,textarea,input[type="text"], input[type="password"] {border: 1px solid #ccc;box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;border-radius:3px;padding:2px 3px;}
.txt:focus,textarea:focus,input[type="text"]:focus, input[type="password"]:focus {border: 1px solid #2C5193;box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(44, 81, 147, 0.6);}
.txta{font-size:12px;line-height:18px;}
.txt20{width:20px;}
.txt30{width:30px;}
.txt50{width:50px;}
.txt75{width:75px;}
.txt85{width:85px;}
.txt100{width:100px;}
.txt125{width:125px;}
.txt150{width:150px;}
.txt175{width:175px;}
.txt200{width:200px;}
.txt250{width:250px;}
.txt280{width:280px;}
.txt300{width:300px;}
.txt350{width:350px;}
.txt400{width:400px;}

/*标准表格*/
.fn-table{width:100%;}
.fn-table>tbody>tr>td{padding:3px;background:#fff;border:1px solid #CEDCED;}
.fn-table>tbody>tr>th{background:#E3F5FF;padding:2px;border:1px solid #CEDCED;font-weight:bold;}

.fn-table-space>tbody>tr:nth-child(2n 1)>td{background:#efefef;}

/*细线表格*/
.fn-table-line>tbody>tr>td{}

/*鼠标hover表格*/
.fn-table-mouse>tbody>tr:nth-child(2n 1)>td{background:#efefef;}
.fn-table tr.on>tbody>tr>td,.fn-table-mouse>tbody>tr:hover>td{background:#FCF8E3;}

/*功能表格*/
.fn-table-function>tbody>tr>td:nth-child(2n 1){background:#E3F5FF;text-align:right;font-weight:bold;}
.fn-table-function>tbody>tr>td:first-child{background:#E3F5FF;text-align:right;font-weight:bold;}

/*干净表格*/
.fn-table-clear{}
.fn-table-clear>tbody>tr>td{padding:3px;background:#fff;border:none;}
.fn-table-clear>tbody>tr>th{background:#E3F5FF;padding:3px;border:none;}

/*iframe 头部样式，仅后台部分案例*/
.fn-iframe-hd{padding:2px 5px;background:#2C5193;margin-bottom:30px;line-height:22px;height:22px;color:#fff;position:fixed;left:0;top:0;width:100%;}
.fn-iframe-hd .close{background:url(/Manager/Themes/images/icons/closed.png) no-repeat center center;float:right;width:14px;height:13px;cursor:pointer;padding:4px 5px;margin-right:10px;}
.fn-iframe-hd .close:hover{opacity:0.8;}
.fn-iframe-hd .tt{float:left;font-weight:bold;}

/*标准Tab选项卡*/
.fn-tab .hd li{float:left;margin-right:2px;padding:2px 5px;border:1px solid #2C5193;border-radius:5px 5px 0 0;cursor:pointer;background:#2C5193;color:#fff;}
.fn-tab .hd li.on{background:#4B8AF9;color:#fff;border:1px solid #4B8AF9;border-bottom:0;}
.fn-tab .bd{border:1px solid #ddd;padding:3px;margin-top:-1px;}
.fn-tab .bd div.item{display:none;}
.fn-tab .bd div.on{display:block;}

/*搜索框*/
.fn-searchbar{border:1px solid #CEDCED;padding:2px;border-radius:3px;}
.fn-searchbar input,.fn-searchbar select{vertical-align:middle;}

/*分页*/
.fn-pager{background:#E3F5FF;border:1px solid #CEDCED;margin:0 0 5px;border-top:0;}
.fn-pager div{line-height:26px;white-space:nowrap;word-break:break-all;}
.fn-pager input{margin-left:5px;}
.fn-pager a{border:1px solid #E3F5FF;padding:3px 5px;}
.fn-pager span.on{background:#2C5193;border:1px solid #2C5193;color:#fff;padding:3px 5px;font-weight:bold;}
.fn-pager a:hover{background:#2C5193;border:1px solid #2C5193;color:#fff;}
.fn-pager input,.fn-pager select,.fn-pager a,.fn-pager span{vertical-align:middle;}
.fn-pagerExt{float:right;margin-top:-22px;}
.fn-pagerExt input{vertical-align:middle;}

/*按钮*/
.btn,.fn-pager input[type='submit']{border-radius:3px;padding:1px 2px;border:1px solid #B3B3B3;cursor:pointer;background-image: linear-gradient(to bottom, #fff, #e6e6e6); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);color:#666;line-height:20px;vertical-align:middle;text-decoration:none;padding:1px 3px