Mouse drag sorting Li or Table_jquery implemented by jquery-JS Tutorial-php.cn

1. Front-end page

Copy code The code is as follows:

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

广告管理

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