简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

Home  >  Article  >  Web Front-end  >  jquery mouse dragging Table to sort (code attached)

jquery mouse dragging Table to sort (code attached)

php中世界最好的语言
php中世界最好的语言Original
2018-04-26 16:29:532071browse

这次给大家带来jquery鼠标拖动Table进行排序（附代码），jquery鼠标拖动Table进行排序的注意事项有哪些，下面就是实战案例，一起来看一下。

1、前端页面

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="拖动排序Li或Table.aspx.cs" Inherits="拖动排序Li或Table" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head id="Head1"> 
<title>广告管理 </title> 
<link href="Styles/css.css" rel="stylesheet" type="text/css" /> 
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> 
<script src="Scripts/ui.core.js" type="text/javascript"></script> 
<script src="Scripts/ui.sortable.js" type="text/javascript"></script> 
<script type="text/javascript" language="javascript"> 
//添加广告 
function addlinks() { 
editWidget("PhoneArticleListPageInsOrUp.aspx"); 
} 
</script> 
<script type="text/javascript"> 
$(function () { 
$(&#39;.sortable&#39;).sortable({ cursor: &#39;move&#39; }); 
}); 
</script> 
<script type="text/javascript"> 
//编辑 
function editlink(prefix, aftfix, obj) { 
editWidget("PhoneArticleListPageInsOrUp.aspx?ID=" + obj); 
} 
</script> 
<script type="text/javascript"> 
function getsortresult(prefix, aftfix) { 
var flag = document.getElementById("" + prefix + "_sortable_" + aftfix + ""); 
if (flag) { 
var result = $("#" + prefix + "_sortable_" + aftfix + "").sortable(&#39;toArray&#39;); 
$(":button").attr("disabled", "disabled"); $(":submit").attr("disabled", "disabled"); 
$("#delay_" + prefix + "_" + aftfix + "").show(); 
$("#normal_" + prefix + "_" + aftfix + "").hide(); 
$.ajax({ 
url: "PhoneArticleListPage_2.aspx?word=" + result, 
cache: false, 
success: function (html) { 
$("#delay_" + prefix + "_" + aftfix + "").hide(); 
$("#normal_" + prefix + "_" + aftfix + "").show(); 
$(":button").removeAttr("disabled"); $(":submit").removeAttr("disabled"); 
} 
}); 
alert(flag); 
alert("手机文章列表排列顺序保存成功！"); 
} 
else { 
alert("没有需要排序的手机文章列表！"); 
return false; 
} 
} 
</script> 
<script type="text/javascript"> 
//删除广告 
function deletelink() { 
if (confirm("您确定删除您刚才选中的项吗?")) { 
var s = document.getElementsByName("checkbox"); 
var s2 = ""; 
for (var i = 0; i < s.length; i++) { 
if (s[i].checked) { 
s2 += s[i].value + &#39;,&#39;; 
} 
} 
location.href = "PhoneArticleListPage_2.aspx?Del_Id=" + s2; //这里传过去的是已逗号分隔开的id，需要在后面的页面内取出 
} 
} 
</script> 
<style type="text/css"> 
.sortable 
{ 
margin: 0; 
padding: 0; 
} 
.sortable li 
{ 
margin: 3px 8px 3px 0; 
float: left; 
} 
.sortable li 
{ 
width: 250px; 
height: 170px; 
} 
</style> 
</head> 
<body> 
<form method="post" action="PhoneArticleListPage_2.aspx" id="form1"> 
<table class="TABLE1 fn-table fn-table-mouse" align="center"> 
<tr> 
<td width="50%"> 
<input name="AdSave" type="button" id="AdSave" class="btn" onclick="getsortresult(&#39;sitelinks&#39;,&#39;text&#39;)" 
value="保存顺序" /> 
</td> 
<td width="50%" align="right"> 
提示：按住鼠标拖动链接，之后单击保存按钮就可以完成对链接的排列 
</td> 
</tr> 
<tr> 
<td width="100%" colspan="2" align="center" style="background-color: #F6F6F6;"> 
<p id="tabs"> 
<p id="tabs-sitelinks-text"> 
<p id="normal_sitelinks_text"> 
<ul class="sortable" id="sitelinks_sortable_text"> 
<li style="padding: 0; border: 1px solid #bad5f2; background: #f7fbfe; text-align: left" 
id="sitelinks_text_96"> 
<table cellspacing="0" cellpadding="0" border="0px" style="background: #f7fbfe; width: 100%; 
height: 170px; table-layout: fixed; word-wrap: break-word;"> 
<tr style="height: 20px;"> 
<td width="30%" align="left" valign="top"> 
<input type="checkbox" name="checkbox" value="96" /> 
</td> 
<td width="70%" height="10px" align="left"> 
<a href="javascript:void(0)" onclick="editlink(&#39;sitelinks&#39;,&#39;text&#39;,&#39;96&#39;)"><font color="#CC3333">[编辑]</font> 
</a> 
</td> 
</tr> 
<tr> 
<td> 
<b>文章标题:</b> 
</td> 
<td> 
法国时代复分大占地方 
</td> 
</tr> 
<tr> 
<td> 
<b>列表图片:</b> 
</td> 
<td> 
<img width="100" height="50px" src=&#39;http://10.1.3.203:6001/Manager/MenuPages/PhoneManage/ArticleImg/201312023422.jpg &#39; 
alt=&#39;法国时代复分大占地方&#39; /> 
</td> 
</tr> 
<tr> 
<td> 
<b>文章URL:</b> 
</td> 
<td> 
<a href=&#39;http://www.uzai.com/trip/27879.html?46400284&#39; target="_blank">http://www.uzai.com/trip/27879.html?46400284</a> 
</td> 
</tr> 
</table> 
</li> 
<li style="padding: 0; border: 1px solid #bad5f2; background: #f7fbfe; text-align: left" 
id="sitelinks_text_78"> 
<table cellspacing="0" cellpadding="0" border="0px" style="background: #f7fbfe; width: 100%; 
height: 170px; table-layout: fixed; word-wrap: break-word;"> 
<tr style="height: 20px;"> 
<td width="30%" align="left" valign="top"> 
<input type="checkbox" name="checkbox" value="78" /> 
</td> 
<td width="70%" height="10px" align="left"> 
<a href="javascript:void(0)" onclick="editlink(&#39;sitelinks&#39;,&#39;text&#39;,&#39;78&#39;)"><font color="#CC3333">[编辑]</font> 
</a> 
</td> 
</tr> 
<tr> 
<td> 
<b>文章标题:</b> 
</td> 
<td> 
医保结余7000亿花不出去 官员建议提高报销比例007 
</td> 
</tr> 
<tr> 
<td> 
<b>列表图片:</b> 
</td> 
<td> 
<img width="100" height="50px" src=&#39;http://10.1.3.203:6001/Manager/MenuPages/PhoneManage/ArticleImg/201312023115.jpg &#39; 
alt=&#39;医保结余7000亿花不出去 官员建议提高报销比例007&#39; /> 
</td> 
</tr> 
<tr> 
<td> 
<b>文章URL:</b> 
</td> 
<td> 
<a href=&#39;http://finance.sina.com.cn/china/20131202/011217492954.shtml&#39; target="_blank"> 
http://finance.sina.com.cn/china/20131202/011217492954.shtml</a> 
</td> 
</tr> 
</table> 
</li> 
<li style="padding: 0; border: 1px solid #bad5f2; background: #f7fbfe; text-align: left" 
id="sitelinks_text_94"> 
<table cellspacing="0" cellpadding="0" border="0px" style="background: #f7fbfe; width: 100%; 
height: 170px; table-layout: fixed; word-wrap: break-word;"> 
<tr style="height: 20px;"> 
<td width="30%" align="left" valign="top"> 
<input type="checkbox" name="checkbox" value="94" /> 
</td> 
<td width="70%" height="10px" align="left"> 
<a href="javascript:void(0)" onclick="editlink(&#39;sitelinks&#39;,&#39;text&#39;,&#39;94&#39;)"><font color="#CC3333">[编辑]</font> 
</a> 
</td> 
</tr> 
<tr> 
<td> 
<b>文章标题:</b> 
</td> 
<td> 
新浪科技“因你而变”:卡片式社交首页新版上线 
</td> 
</tr> 
<tr> 
<td> 
<b>列表图片:</b> 
</td> 
<td> 
<img width="100" height="50px" src=&#39;http://10.1.3.203:6001/Manager/MenuPages/PhoneManage/ArticleImg/201312021700.jpg &#39; 
alt=&#39;新浪科技“因你而变”:卡片式社交首页新版上线&#39; /> 
</td> 
</tr> 
<tr> 
<td> 
<b>文章URL:</b> 
</td> 
<td> 
<a href=&#39;http://tech.sina.com.cn/i/2013-12-02/00158965413.shtml&#39; target="_blank">http://tech.sina.com.cn/i/2013-12-02/00158965413.shtml</a> 
</td> 
</tr> 
</table> 
</li> 
<li style="padding: 0; border: 1px solid #bad5f2; background: #f7fbfe; text-align: left" 
id="sitelinks_text_91"> 
<table cellspacing="0" cellpadding="0" border="0px" style="background: #f7fbfe; width: 100%; 
height: 170px; table-layout: fixed; word-wrap: break-word;"> 
<tr style="height: 20px;"> 
<td width="30%" align="left" valign="top"> 
<input type="checkbox" name="checkbox" value="91" /> 
</td> 
<td width="70%" height="10px" align="left"> 
<a href="javascript:void(0)" onclick="editlink(&#39;sitelinks&#39;,&#39;text&#39;,&#39;91&#39;)"><font color="#CC3333">[编辑]</font> 
</a> 
</td> 
</tr> 
<tr> 
<td> 
<b>文章标题:</b> 
</td> 
<td> 
教授拒入普通病房：我的命十个人都换不来001 
</td> 
</tr> 
<tr> 
<td> 
<b>列表图片:</b> 
</td> 
<td> 
<img width="100" height="50px" src=&#39;http://10.1.3.203:6001/Manager/MenuPages/PhoneManage/ArticleImg/201312020214.jpg &#39; 
alt=&#39;教授拒入普通病房：我的命十个人都换不来001&#39; /> 
</td> 
</tr> 
<tr> 
<td> 
<b>文章URL:</b> 
</td> 
<td> 
<a href=&#39;http://news.sohu.com/20131202/n391116380.shtml&#39; target="_blank">http://news.sohu.com/20131202/n391116380.shtml</a> 
</td> 
</tr> 
</table> 
</li> 
<li style="padding: 0; border: 1px solid #bad5f2; background: #f7fbfe; text-align: left" 
id="sitelinks_text_79"> 
<table cellspacing="0" cellpadding="0" border="0px" style="background: #f7fbfe; width: 100%; 
height: 170px; table-layout: fixed; word-wrap: break-word;"> 
<tr style="height: 20px;"> 
<td width="30%" align="left" valign="top"> 
<input type="checkbox" name="checkbox" value="79" /> 
</td> 
<td width="70%" height="10px" align="left"> 
<a href="javascript:void(0)" onclick="editlink(&#39;sitelinks&#39;,&#39;text&#39;,&#39;79&#39;)"><font color="#CC3333">[编辑]</font> 
</a> 
</td> 
</tr> 
<tr> 
<td> 
<b>文章标题:</b> 
</td> 
<td> 
广东打击*抓百人 首例案件开审9人批捕002 
</td> 
</tr> 
<tr> 
<td> 
<b>列表图片:</b> 
</td> 
<td> 
<img width="100" height="50px" src=&#39;http://10.1.3.203:6001/Manager/MenuPages/PhoneManage/ArticleImg/201312023939.jpg &#39; 
alt=&#39;广东打击*抓百人 首例案件开审9人批捕002&#39; /> 
</td> 
</tr> 
<tr> 
<td> 
<b>文章URL:</b> 
</td> 
<td> 
<a href=&#39;http://tech.sina.com.cn/t/2013-12-02/01148965434.shtml&#39; target="_blank">http://tech.sina.com.cn/t/2013-12-02/01148965434.shtml</a> 
</td> 
</tr> 
</table> 
</li> 
<li style="padding: 0; border: 1px solid #bad5f2; background: #f7fbfe; text-align: left" 
id="sitelinks_text_81"> 
<table cellspacing="0" cellpadding="0" border="0px" style="background: #f7fbfe; width: 100%; 
height: 170px; table-layout: fixed; word-wrap: break-word;"> 
<tr style="height: 20px;"> 
<td width="30%" align="left" valign="top"> 
<input type="checkbox" name="checkbox" value="81" /> 
</td> 
<td width="70%" height="10px" align="left"> 
<a href="javascript:void(0)" onclick="editlink(&#39;sitelinks&#39;,&#39;text&#39;,&#39;81&#39;)"><font color="#CC3333">[编辑]</font> 
</a> 
</td> 
</tr> 
<tr> 
<td> 
<b>文章标题:</b> 
</td> 
<td> 
1男1女从南昌大学图书馆坠亡 女死者为该校学生003 
</td> 
</tr> 
<tr> 
<td> 
<b>列表图片:</b> 
</td> 
<td> 
<img width="100" height="50px" src=&#39;http://10.1.3.203:6001/Manager/MenuPages/PhoneManage/ArticleImg/201312024135.jpg &#39; 
alt=&#39;1男1女从南昌大学图书馆坠亡 女死者为该校学生003&#39; /> 
</td> 
</tr> 
<tr> 
<td> 
<b>文章URL:</b> 
</td> 
<td> 
<a href=&#39;http://news.sina.com.cn/s/2013-12-02/115128865820.shtml&#39; target="_blank">http://news.sina.com.cn/s/2013-12-02/115128865820.shtml</a> 
</td> 
</tr> 
</table> 
</li> 
<li style="padding: 0; border: 1px solid #bad5f2; background: #f7fbfe; text-align: left" 
id="sitelinks_text_77"> 
<table cellspacing="0" cellpadding="0" border="0px" style="background: #f7fbfe; width: 100%; 
height: 170px; table-layout: fixed; word-wrap: break-word;"> 
<tr style="height: 20px;"> 
<td width="30%" align="left" valign="top"> 
<input type="checkbox" name="checkbox" value="77" /> 
</td> 
<td width="70%" height="10px" align="left"> 
<a href="javascript:void(0)" onclick="editlink(&#39;sitelinks&#39;,&#39;text&#39;,&#39;77&#39;)"><font color="#CC3333">[编辑]</font> 
</a> 
</td> 
</tr> 
<tr> 
<td> 
<b>文章标题:</b> 
</td> 
<td> 
河南车主遭罚服毒调查:每月办3000元月票可免罚004 
</td> 
</tr> 
<tr> 
<td> 
<b>列表图片:</b> 
</td> 
<td> 
<img width="100" height="50px" src=&#39;http://10.1.3.203:6001/Manager/MenuPages/PhoneManage/ArticleImg/201312022910.jpg &#39; 
alt=&#39;河南车主遭罚服毒调查:每月办3000元月票可免罚004&#39; /> 
</td> 
</tr> 
<tr> 
<td> 
<b>文章URL:</b> 
</td> 
<td> 
<a href=&#39;http://news.sina.com.cn/c/2013-12-02/023928862436.shtml&#39; target="_blank">http://news.sina.com.cn/c/2013-12-02/023928862436.shtml</a> 
</td> 
</tr> 
</table> 
</li> 
<li style="padding: 0; border: 1px solid #bad5f2; background: #f7fbfe; text-align: left" 
id="sitelinks_text_82"> 
<table cellspacing="0" cellpadding="0" border="0px" style="background: #f7fbfe; width: 100%; 
height: 170px; table-layout: fixed; word-wrap: break-word;"> 
<tr style="height: 20px;"> 
<td width="30%" align="left" valign="top"> 
<input type="checkbox" name="checkbox" value="82" /> 
</td> 
<td width="70%" height="10px" align="left"> 
<a href="javascript:void(0)" onclick="editlink(&#39;sitelinks&#39;,&#39;text&#39;,&#39;82&#39;)"><font color="#CC3333">[编辑]</font> 
</a> 
</td> 
</tr> 
<tr> 
<td> 
<b>文章标题:</b> 
</td> 
<td> 
大学生见义勇为被连捅三刀 因家贫无钱医治(图)005 
</td> 
</tr> 
<tr> 
<td> 
<b>列表图片:</b> 
</td> 
<td> 
<img width="100" height="50px" src=&#39;http://10.1.3.203:6001/Manager/MenuPages/PhoneManage/ArticleImg/201312024219.jpg &#39; 
alt=&#39;大学生见义勇为被连捅三刀 因家贫无钱医治(图)005&#39; /> 
</td> 
</tr> 
<tr> 
<td> 
<b>文章URL:</b> 
</td> 
<td> 
<a href=&#39;http://news.sina.com.cn/s/2013-12-02/052028863120.shtml&#39; target="_blank">http://news.sina.com.cn/s/2013-12-02/052028863120.shtml</a> 
</td> 
</tr> 
</table> 
</li> 
<li style="padding: 0; border: 1px solid #bad5f2; background: #f7fbfe; text-align: left" 
id="sitelinks_text_80"> 
<table cellspacing="0" cellpadding="0" border="0px" style="background: #f7fbfe; width: 100%; 
height: 170px; table-layout: fixed; word-wrap: break-word;"> 
<tr style="height: 20px;"> 
<td width="30%" align="left" valign="top"> 
<input type="checkbox" name="checkbox" value="80" /> 
</td> 
<td width="70%" height="10px" align="left"> 
<a href="javascript:void(0)" onclick="editlink(&#39;sitelinks&#39;,&#39;text&#39;,&#39;80&#39;)"><font color="#CC3333">[编辑]</font> 
</a> 
</td> 
</tr> 
<tr> 
<td> 
<b>文章标题:</b> 
</td> 
<td> 
676帽!韦德刷新盖帽纪录 前辈1100场他只用679场006 
</td> 
</tr> 
<tr> 
<td> 
<b>列表图片:</b> 
</td> 
<td> 
<img width="100" height="50px" src=&#39;http://10.1.3.203:6001/Manager/MenuPages/PhoneManage/ArticleImg/201312024034.jpg &#39; 
alt=&#39;676帽!韦德刷新盖帽纪录 前辈1100场他只用679场006&#39; /> 
</td> 
</tr> 
<tr> 
<td> 
<b>文章URL:</b> 
</td> 
<td> 
<a href=&#39;http://sports.sina.com.cn/nba/2013-12-02/10006913299.shtml&#39; target="_blank"> 
http://sports.sina.com.cn/nba/2013-12-02/10006913299.shtml</a> 
</td> 
</tr> 
</table> 
</li> 
<li style="padding: 0; border: 1px solid #bad5f2; background: #f7fbfe; text-align: left" 
id="sitelinks_text_83"> 
<table cellspacing="0" cellpadding="0" border="0px" style="background: #f7fbfe; width: 100%; 
height: 170px; table-layout: fixed; word-wrap: break-word;"> 
<tr style="height: 20px;"> 
<td width="30%" align="left" valign="top"> 
<input type="checkbox" name="checkbox" value="83" /> 
</td> 
<td width="70%" height="10px" align="left"> 
<a href="javascript:void(0)" onclick="editlink(&#39;sitelinks&#39;,&#39;text&#39;,&#39;83&#39;)"><font color="#CC3333">[编辑]</font> 
</a> 
</td> 
</tr> 
<tr> 
<td> 
<b>文章标题:</b> 
</td> 
<td> 
8岁大妈秀腹肌健壮,长相神秘还被曝已有两小孩008 
</td> 
</tr> 
<tr> 
<td> 
<b>列表图片:</b> 
</td> 
<td> 
<img width="100" height="50px" src=&#39;http://10.1.3.203:6001/Manager/MenuPages/PhoneManage/ArticleImg/201312024516.jpg &#39; 
alt=&#39;8岁大妈秀腹肌健壮,长相神秘还被曝已有两小孩008&#39; /> 
</td> 
</tr> 
<tr> 
<td> 
<b>文章URL:</b> 
</td> 
<td> 
<a href=&#39;http://net.chinabyte.com/442/12792942.shtml&#39; target="_blank">http://net.chinabyte.com/442/12792942.shtml</a> 
</td> 
</tr> 
</table> 
</li> 
</ul> 
</p> 
</p> 
</p> 
</td> 
</tr> 
</table> 
</form> 
</body> 
</html> 
2、CSS样式 
[css] view plaincopy在CODE上查看代码片派生到我的代码片 
body,p,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 p.item{display:none;} 
.fn-tab .bd p.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 p{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=&#39;submit&#39;]{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\0;} 
a.btn{padding:3px 6px;} 
.btn:hover{background:#eee;text-decoration:none;} 
.btn-on,.fn-pager input[type=&#39;submit&#39;]{background-image:linear-gradient(to bottom,#4b8af9,#2C5193);color:#fff;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.1);background-color:#2C5193;border:1px solid #2C5193\0;} 
.btn-on:hover,.fn-pager input[type=&#39;submit&#39;]:hover{background:#4b8af9;color:#fff;} 
.btn-gray{background:linear-gradient(to bottom,#ccc,#efefef);color:#fff;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.1);cursor:not-allowed;} 
.btn-gray:hover{background:#eee;text-decoration:none;} 
.btn:active{box-shadow:inset 0 1px 2px rgba(0,0,0,.25),inset 0 1px 3px rgba(0,0,0,0.15);} 
#tooltip{position: absolute;border: 1px solid #333;background: #f7f5d1;padding: 2px 5px;color: #333;display: none;width: 500px;} 
#tooltip{position:absolute;color:#333;display:block;background-color:#fff;border:1px solid #555;box-shadow:0 0 10px rgba(0,0,0,.3);border-radius:5px;padding:3px;min-width:160px;min-height:80px;} 
#tooltip img{border-radius:5px;} 
/*文字大小*/ 
.font12{font-size:12px;} 
.font13{font-size:13px;} 
.font14{font-size:14px;} 
.font15{font-size:15px;} 
.font16{font-size:16px;} 
.font17{font-size:17px;} 
.font18{font-size:18px;} 
/*文字颜色*/ 
.font-red{color:Red;} 
.font-green{color:Green;} 
.font-white{color:White;} 
.font-gray{color:Gray;} 
/*鼠标标记*/ 
.hand{cursor:pointer;} 
3、主要js 
jquery.js 
ui.core.js 
[javascript] view plaincopy在CODE上查看代码片派生到我的代码片 
/* 
* jQuery UI 1.7.1 
* 
* Copyright (c) 2009 AUTHORS.txt (http://jqueryui.com/about) 
* Dual licensed under the MIT (MIT-LICENSE.txt) 
* and GPL (GPL-LICENSE.txt) licenses. 
* 
* http://docs.jquery.com/UI 
*/ 
;jQuery.ui || (function($) { 
var _remove = $.fn.remove, 
isFF2 = $.browser.mozilla && (parseFloat($.browser.version) < 1.9); 
//Helper functions and ui object 
$.ui = { 
version: "1.7.1", 
// $.ui.plugin is deprecated. Use the proxy pattern instead. 
plugin: { 
add: function(module, option, set) { 
var proto = $.ui[module].prototype; 
for(var i in set) { 
proto.plugins[i] = proto.plugins[i] || []; 
proto.plugins[i].push([option, set[i]]); 
} 
}, 
call: function(instance, name, args) { 
var set = instance.plugins[name]; 
if(!set || !instance.element[0].parentNode) { return; } 
for (var i = 0; i < set.length; i++) { 
if (instance.options[set[i][0]]) { 
set[i][1].apply(instance.element, args); 
} 
} 
} 
}, 
contains: function(a, b) { 
return document.compareDocumentPosition 
? a.compareDocumentPosition(b) & 16 
: a !== b && a.contains(b); 
}, 
hasScroll: function(el, a) { 
//If overflow is hidden, the element might have extra content, but the user wants to hide it 
if ($(el).css(&#39;overflow&#39;) == &#39;hidden&#39;) { return false; } 
var scroll = (a && a == &#39;left&#39;) ? &#39;scrollLeft&#39; : &#39;scrollTop&#39;, 
has = false; 
if (el[scroll] > 0) { return true; } 
// TODO: determine which cases actually cause this to happen 
// if the element doesn&#39;t have the scroll set, see if it&#39;s possible to 
// set the scroll 
el[scroll] = 1; 
has = (el[scroll] > 0); 
el[scroll] = 0; 
return has; 
}, 
isOverAxis: function(x, reference, size) { 
//Determines when x coordinate is over "b" element axis 
return (x > reference) && (x < (reference + size)); 
}, 
isOver: function(y, x, top, left, height, width) { 
//Determines when x, y coordinates is over "b" element 
return $.ui.isOverAxis(y, top, height) && $.ui.isOverAxis(x, left, width); 
}, 
keyCode: { 
BACKSPACE: 8, 
CAPS_LOCK: 20, 
COMMA: 188, 
CONTROL: 17, 
DELETE: 46, 
DOWN: 40, 
END: 35, 
ENTER: 13, 
ESCAPE: 27, 
HOME: 36, 
INSERT: 45, 
LEFT: 37, 
NUMPAD_ADD: 107, 
NUMPAD_DECIMAL: 110, 
NUMPAD_pIDE: 111, 
NUMPAD_ENTER: 108, 
NUMPAD_MULTIPLY: 106, 
NUMPAD_SUBTRACT: 109, 
PAGE_DOWN: 34, 
PAGE_UP: 33, 
PERIOD: 190, 
RIGHT: 39, 
SHIFT: 16, 
SPACE: 32, 
TAB: 9, 
UP: 38 
} 
}; 
// WAI-ARIA normalization 
if (isFF2) { 
var attr = $.attr, 
removeAttr = $.fn.removeAttr, 
ariaNS = "http://www.w3.org/2005/07/aaa", 
ariaState = /^aria-/, 
ariaRole = /^wairole:/; 
$.attr = function(elem, name, value) { 
var set = value !== undefined; 
return (name == &#39;role&#39; 
? (set 
? attr.call(this, elem, name, "wairole:" + value) 
: (attr.apply(this, arguments) || "").replace(ariaRole, "")) 
: (ariaState.test(name) 
? (set 
? elem.setAttributeNS(ariaNS, 
name.replace(ariaState, "aaa:"), value) 
: attr.call(this, elem, name.replace(ariaState, "aaa:"))) 
: attr.apply(this, arguments))); 
}; 
$.fn.removeAttr = function(name) { 
return (ariaState.test(name) 
? this.each(function() { 
this.removeAttributeNS(ariaNS, name.replace(ariaState, "")); 
}) : removeAttr.call(this, name)); 
}; 
} 
//jQuery plugins 
$.fn.extend({ 
remove: function() { 
// Safari has a native remove event which actually removes DOM elements, 
// so we have to use triggerHandler instead of trigger (#3037). 
$("*", this).add(this).each(function() { 
$(this).triggerHandler("remove"); 
}); 
return _remove.apply(this, arguments ); 
}, 
enableSelection: function() { 
return this 
.attr(&#39;unselectable&#39;, &#39;off&#39;) 
.css(&#39;MozUserSelect&#39;, &#39;&#39;) 
.unbind(&#39;selectstart.ui&#39;); 
}, 
disableSelection: function() { 
return this 
.attr(&#39;unselectable&#39;, &#39;on&#39;) 
.css(&#39;MozUserSelect&#39;, &#39;none&#39;) 
.bind(&#39;selectstart.ui&#39;, function() { return false; }); 
}, 
scrollParent: function() { 
var scrollParent; 
if(($.browser.msie && (/(static|relative)/).test(this.css(&#39;position&#39;))) || (/absolute/).test(this.css(&#39;position&#39;))) { 
scrollParent = this.parents().filter(function() { 
return (/(relative|absolute|fixed)/).test($.curCSS(this,&#39;position&#39;,1)) && (/(auto|scroll)/).test($.curCSS(this,&#39;overflow&#39;,1)+$.curCSS(this,&#39;overflow-y&#39;,1)+$.curCSS(this,&#39;overflow-x&#39;,1)); 
}).eq(0); 
} else { 
scrollParent = this.parents().filter(function() { 
return (/(auto|scroll)/).test($.curCSS(this,&#39;overflow&#39;,1)+$.curCSS(this,&#39;overflow-y&#39;,1)+$.curCSS(this,&#39;overflow-x&#39;,1)); 
}).eq(0); 
} 
return (/fixed/).test(this.css(&#39;position&#39;)) || !scrollParent.length ? $(document) : scrollParent; 
} 
}); 
//Additional selectors 
$.extend($.expr[&#39;:&#39;], { 
data: function(elem, i, match) { 
return !!$.data(elem, match[3]); 
}, 
focusable: function(element) { 
var nodeName = element.nodeName.toLowerCase(), 
tabIndex = $.attr(element, &#39;tabindex&#39;); 
return (/input|select|textarea|button|object/.test(nodeName) 
? !element.disabled 
: &#39;a&#39; == nodeName || &#39;area&#39; == nodeName 
? element.href || !isNaN(tabIndex) 
: !isNaN(tabIndex)) 
// the element and all of its ancestors must be visible 
// the browser may report that the area is hidden 
&& !$(element)[&#39;area&#39; == nodeName ? &#39;parents&#39; : &#39;closest&#39;](&#39;:hidden&#39;).length; 
}, 
tabbable: function(element) { 
var tabIndex = $.attr(element, &#39;tabindex&#39;); 
return (isNaN(tabIndex) || tabIndex >= 0) && $(element).is(&#39;:focusable&#39;); 
} 
}); 
// $.widget is a factory to create jQuery plugins 
// taking some boilerplate code out of the plugin code 
function getter(namespace, plugin, method, args) { 
function getMethods(type) { 
var methods = $[namespace][plugin][type] || []; 
return (typeof methods == &#39;string&#39; ? methods.split(/,?\s+/) : methods); 
} 
var methods = getMethods(&#39;getter&#39;); 
if (args.length == 1 && typeof args[0] == &#39;string&#39;) { 
methods = methods.concat(getMethods(&#39;getterSetter&#39;)); 
} 
return ($.inArray(method, methods) != -1); 
} 
$.widget = function(name, prototype) { 
var namespace = name.split(".")[0]; 
name = name.split(".")[1]; 
// create plugin method 
$.fn[name] = function(options) { 
var isMethodCall = (typeof options == &#39;string&#39;), 
args = Array.prototype.slice.call(arguments, 1); 
// prevent calls to internal methods 
if (isMethodCall && options.substring(0, 1) == &#39;_&#39;) { 
return this; 
} 
// handle getter methods 
if (isMethodCall && getter(namespace, name, options, args)) { 
var instance = $.data(this[0], name); 
return (instance ? instance[options].apply(instance, args) 
: undefined); 
} 
// handle initialization and non-getter methods 
return this.each(function() { 
var instance = $.data(this, name); 
// constructor 
(!instance && !isMethodCall && 
$.data(this, name, new $[namespace][name](this, options))._init()); 
// method call 
(instance && isMethodCall && $.isFunction(instance[options]) && 
instance[options].apply(instance, args)); 
}); 
}; 
// create widget constructor 
$[namespace] = $[namespace] || {}; 
$[namespace][name] = function(element, options) { 
var self = this; 
this.namespace = namespace; 
this.widgetName = name; 
this.widgetEventPrefix = $[namespace][name].eventPrefix || name; 
this.widgetBaseClass = namespace + &#39;-&#39; + name; 
this.options = $.extend({}, 
$.widget.defaults, 
$[namespace][name].defaults, 
$.metadata && $.metadata.get(element)[name], 
options); 
this.element = $(element) 
.bind(&#39;setData.&#39; + name, function(event, key, value) { 
if (event.target == element) { 
return self._setData(key, value); 
} 
}) 
.bind(&#39;getData.&#39; + name, function(event, key) { 
if (event.target == element) { 
return self._getData(key); 
} 
}) 
.bind(&#39;remove&#39;, function() { 
return self.destroy(); 
}); 
}; 
// add widget prototype 
$[namespace][name].prototype = $.extend({}, $.widget.prototype, prototype); 
// TODO: merge getter and getterSetter properties from widget prototype 
// and plugin prototype 
$[namespace][name].getterSetter = &#39;option&#39;; 
}; 
$.widget.prototype = { 
_init: function() {}, 
destroy: function() { 
this.element.removeData(this.widgetName) 
.removeClass(this.widgetBaseClass + &#39;-disabled&#39; + &#39; &#39; + this.namespace + &#39;-state-disabled&#39;) 
.removeAttr(&#39;aria-disabled&#39;); 
}, 
option: function(key, value) { 
var options = key, 
self = this; 
if (typeof key == "string") { 
if (value === undefined) { 
return this._getData(key); 
} 
options = {}; 
options[key] = value; 
} 
$.each(options, function(key, value) { 
self._setData(key, value); 
}); 
}, 
_getData: function(key) { 
return this.options[key]; 
}, 
_setData: function(key, value) { 
this.options[key] = value; 
if (key == &#39;disabled&#39;) { 
this.element 
[value ? &#39;addClass&#39; : &#39;removeClass&#39;]( 
this.widgetBaseClass + &#39;-disabled&#39; + &#39; &#39; + 
this.namespace + &#39;-state-disabled&#39;) 
.attr("aria-disabled", value); 
} 
}, 
enable: function() { 
this._setData(&#39;disabled&#39;, false); 
}, 
disable: function() { 
this._setData(&#39;disabled&#39;, true); 
}, 
_trigger: function(type, event, data) { 
var callback = this.options[type], 
eventName = (type == this.widgetEventPrefix 
? type : this.widgetEventPrefix + type); 
event = $.Event(event); 
event.type = eventName; 
// copy original event properties over to the new event 
// this would happen if we could call $.event.fix instead of $.Event 
// but we don&#39;t have a way to force an event to be fixed multiple times 
if (event.originalEvent) { 
for (var i = $.event.props.length, prop; i;) { 
prop = $.event.props[--i]; 
event[prop] = event.originalEvent[prop]; 
} 
} 
this.element.trigger(event, data); 
return !($.isFunction(callback) && callback.call(this.element[0], event, data) === false 
|| event.isDefaultPrevented()); 
} 
}; 
$.widget.defaults = { 
disabled: false 
}; 
/** Mouse Interaction Plugin **/ 
$.ui.mouse = { 
_mouseInit: function() { 
var self = this; 
this.element 
.bind(&#39;mousedown.&#39;+this.widgetName, function(event) { 
return self._mouseDown(event); 
}) 
.bind(&#39;click.&#39;+this.widgetName, function(event) { 
if(self._preventClickEvent) { 
self._preventClickEvent = false; 
event.stopImmediatePropagation(); 
return false; 
} 
}); 
// Prevent text selection in IE 
if ($.browser.msie) { 
this._mouseUnselectable = this.element.attr(&#39;unselectable&#39;); 
this.element.attr(&#39;unselectable&#39;, &#39;on&#39;); 
} 
this.started = false; 
}, 
// TODO: make sure destroying one instance of mouse doesn&#39;t mess with 
// other instances of mouse 
_mouseDestroy: function() { 
this.element.unbind(&#39;.&#39;+this.widgetName); 
// Restore text selection in IE 
($.browser.msie 
&& this.element.attr(&#39;unselectable&#39;, this._mouseUnselectable)); 
}, 
_mouseDown: function(event) { 
// don&#39;t let more than one widget handle mouseStart 
// TODO: figure out why we have to use originalEvent 
event.originalEvent = event.originalEvent || {}; 
if (event.originalEvent.mouseHandled) { return; } 
// we may have missed mouseup (out of window) 
(this._mouseStarted && this._mouseUp(event)); 
this._mouseDownEvent = event; 
var self = this, 
btnIsLeft = (event.which == 1), 
elIsCancel = (typeof this.options.cancel == "string" ? $(event.target).parents().add(event.target).filter(this.options.cancel).length : false); 
if (!btnIsLeft || elIsCancel || !this._mouseCapture(event)) { 
return true; 
} 
this.mouseDelayMet = !this.options.delay; 
if (!this.mouseDelayMet) { 
this._mouseDelayTimer = setTimeout(function() { 
self.mouseDelayMet = true; 
}, this.options.delay); 
} 
if (this._mouseDistanceMet(event) && this._mouseDelayMet(event)) { 
this._mouseStarted = (this._mouseStart(event) !== false); 
if (!this._mouseStarted) { 
event.preventDefault(); 
return true; 
} 
} 
// these delegates are required to keep context 
this._mouseMoveDelegate = function(event) { 
return self._mouseMove(event); 
}; 
this._mouseUpDelegate = function(event) { 
return self._mouseUp(event); 
}; 
$(document) 
.bind(&#39;mousemove.&#39;+this.widgetName, this._mouseMoveDelegate) 
.bind(&#39;mouseup.&#39;+this.widgetName, this._mouseUpDelegate); 
// preventDefault() is used to prevent the selection of text here - 
// however, in Safari, this causes select boxes not to be selectable 
// anymore, so this fix is needed 
($.browser.safari || event.preventDefault()); 
event.originalEvent.mouseHandled = true; 
return true; 
}, 
_mouseMove: function(event) { 
// IE mouseup check - mouseup happened when mouse was out of window 
if ($.browser.msie && !event.button) { 
return this._mouseUp(event); 
} 
if (this._mouseStarted) { 
this._mouseDrag(event); 
return event.preventDefault(); 
} 
if (this._mouseDistanceMet(event) && this._mouseDelayMet(event)) { 
this._mouseStarted = 
(this._mouseStart(this._mouseDownEvent, event) !== false); 
(this._mouseStarted ? this._mouseDrag(event) : this._mouseUp(event)); 
} 
return !this._mouseStarted; 
}, 
_mouseUp: function(event) { 
$(document) 
.unbind(&#39;mousemove.&#39;+this.widgetName, this._mouseMoveDelegate) 
.unbind(&#39;mouseup.&#39;+this.widgetName, this._mouseUpDelegate); 
if (this._mouseStarted) { 
this._mouseStarted = false; 
this._preventClickEvent = (event.target == this._mouseDownEvent.target); 
this._mouseStop(event); 
} 
return false; 
}, 
_mouseDistanceMet: function(event) { 
return (Math.max( 
Math.abs(this._mouseDownEvent.pageX - event.pageX), 
Math.abs(this._mouseDownEvent.pageY - event.pageY) 
) >= this.options.distance 
); 
}, 
_mouseDelayMet: function(event) { 
return this.mouseDelayMet; 
}, 
// These are placeholder methods, to be overriden by extending plugin 
_mouseStart: function(event) {}, 
_mouseDrag: function(event) {}, 
_mouseStop: function(event) {}, 
_mouseCapture: function(event) { return true; } 
}; 
$.ui.mouse.defaults = { 
cancel: null, 
distance: 1, 
delay: 0 
}; 
})(jQuery); 
ui.sortable.js 
[javascript] view plaincopy在CODE上查看代码片派生到我的代码片 
/* 
* jQuery UI Sortable 1.7.1 
* 
* Copyright (c) 2009 AUTHORS.txt (http://jqueryui.com/about) 
* Dual licensed under the MIT (MIT-LICENSE.txt) 
* and GPL (GPL-LICENSE.txt) licenses. 
* 
* http://docs.jquery.com/UI/Sortables 
* 
* Depends: 
* ui.core.js 
*/ 
(function($) { 
$.widget("ui.sortable", $.extend({}, $.ui.mouse, { 
_init: function() { 
var o = this.options; 
this.containerCache = {}; 
this.element.addClass("ui-sortable"); 
//Get the items 
this.refresh(); 
//Let&#39;s determine if the items are floating 
this.floating = this.items.length ? (/left|right/).test(this.items[0].item.css(&#39;float&#39;)) : false; 
//Let&#39;s determine the parent&#39;s offset 
this.offset = this.element.offset(); 
//Initialize mouse events for interaction 
this._mouseInit(); 
}, 
destroy: function() { 
this.element 
.removeClass("ui-sortable ui-sortable-disabled") 
.removeData("sortable") 
.unbind(".sortable"); 
this._mouseDestroy(); 
for ( var i = this.items.length - 1; i >= 0; i-- ) 
this.items[i].item.removeData("sortable-item"); 
}, 
_mouseCapture: function(event, overrideHandle) { 
if (this.reverting) { 
return false; 
} 
if(this.options.disabled || this.options.type == &#39;static&#39;) return false; 
//We have to refresh the items data once first 
this._refreshItems(event); 
//Find out if the clicked node (or one of its parents) is a actual item in this.items 
var currentItem = null, self = this, nodes = $(event.target).parents().each(function() { 
if($.data(this, &#39;sortable-item&#39;) == self) { 
currentItem = $(this); 
return false; 
} 
}); 
if($.data(event.target, &#39;sortable-item&#39;) == self) currentItem = $(event.target); 
if(!currentItem) return false; 
if(this.options.handle && !overrideHandle) { 
var validHandle = false; 
$(this.options.handle, currentItem).find("*").andSelf().each(function() { if(this == event.target) validHandle = true; }); 
if(!validHandle) return false; 
} 
this.currentItem = currentItem; 
this._removeCurrentsFromItems(); 
return true; 
}, 
_mouseStart: function(event, overrideHandle, noActivation) { 
var o = this.options, self = this; 
this.currentContainer = this; 
//We only need to call refreshPositions, because the refreshItems call has been moved to mouseCapture 
this.refreshPositions(); 
//Create and append the visible helper 
this.helper = this._createHelper(event); 
//Cache the helper size 
this._cacheHelperProportions(); 
/* 
* - Position generation - 
* This block generates everything position related - it&#39;s the core of draggables. 
*/ 
//Cache the margins of the original element 
this._cacheMargins(); 
//Get the next scrolling parent 
this.scrollParent = this.helper.scrollParent(); 
//The element&#39;s absolute position on the page minus margins 
this.offset = this.currentItem.offset(); 
this.offset = { 
top: this.offset.top - this.margins.top, 
left: this.offset.left - this.margins.left 
}; 
// Only after we got the offset, we can change the helper&#39;s position to absolute 
// TODO: Still need to figure out a way to make relative sorting possible 
this.helper.css("position", "absolute"); 
this.cssPosition = this.helper.css("position"); 
$.extend(this.offset, { 
click: { //Where the click happened, relative to the element 
left: event.pageX - this.offset.left, 
top: event.pageY - this.offset.top 
}, 
parent: this._getParentOffset(), 
relative: this._getRelativeOffset() //This is a relative to absolute position minus the actual position calculation - only used for relative positioned helper 
}); 
//Generate the original position 
this.originalPosition = this._generatePosition(event); 
this.originalPageX = event.pageX; 
this.originalPageY = event.pageY; 
//Adjust the mouse offset relative to the helper if &#39;cursorAt&#39; is supplied 
if(o.cursorAt) 
this._adjustOffsetFromHelper(o.cursorAt); 
//Cache the former DOM position 
this.domPosition = { prev: this.currentItem.prev()[0], parent: this.currentItem.parent()[0] }; 
//If the helper is not the original, hide the original so it&#39;s not playing any role during the drag, won&#39;t cause anything bad this way 
if(this.helper[0] != this.currentItem[0]) { 
this.currentItem.hide(); 
} 
//Create the placeholder 
this._createPlaceholder(); 
//Set a containment if given in the options 
if(o.containment) 
this._setContainment(); 
if(o.cursor) { // cursor option 
if ($(&#39;body&#39;).css("cursor")) this._storedCursor = $(&#39;body&#39;).css("cursor"); 
$(&#39;body&#39;).css("cursor", o.cursor); 
} 
if(o.opacity) { // opacity option 
if (this.helper.css("opacity")) this._storedOpacity = this.helper.css("opacity"); 
this.helper.css("opacity", o.opacity); 
} 
if(o.zIndex) { // zIndex option 
if (this.helper.css("zIndex")) this._storedZIndex = this.helper.css("zIndex"); 
this.helper.css("zIndex", o.zIndex); 
} 
//Prepare scrolling 
if(this.scrollParent[0] != document && this.scrollParent[0].tagName != &#39;HTML&#39;) 
this.overflowOffset = this.scrollParent.offset(); 
//Call callbacks 
this._trigger("start", event, this._uiHash()); 
//Recache the helper size 
if(!this._preserveHelperProportions) 
this._cacheHelperProportions(); 
//Post &#39;activate&#39; events to possible containers 
if(!noActivation) { 
for (var i = this.containers.length - 1; i >= 0; i--) { this.containers[i]._trigger("activate", event, self._uiHash(this)); } 
} 
//Prepare possible droppables 
if($.ui.ddmanager) 
$.ui.ddmanager.current = this; 
if ($.ui.ddmanager && !o.dropBehaviour) 
$.ui.ddmanager.prepareOffsets(this, event); 
this.dragging = true; 
this.helper.addClass("ui-sortable-helper"); 
this._mouseDrag(event); //Execute the drag once - this causes the helper not to be visible before getting its correct position 
return true; 
}, 
_mouseDrag: function(event) { 
//Compute the helpers position 
this.position = this._generatePosition(event); 
this.positionAbs = this._convertPositionTo("absolute"); 
if (!this.lastPositionAbs) { 
this.lastPositionAbs = this.positionAbs; 
} 
//Do scrolling 
if(this.options.scroll) { 
var o = this.options, scrolled = false; 
if(this.scrollParent[0] != document && this.scrollParent[0].tagName != &#39;HTML&#39;) { 
if((this.overflowOffset.top + this.scrollParent[0].offsetHeight) - event.pageY < o.scrollSensitivity) 
this.scrollParent[0].scrollTop = scrolled = this.scrollParent[0].scrollTop + o.scrollSpeed; 
else if(event.pageY - this.overflowOffset.top < o.scrollSensitivity) 
this.scrollParent[0].scrollTop = scrolled = this.scrollParent[0].scrollTop - o.scrollSpeed; 
if((this.overflowOffset.left + this.scrollParent[0].offsetWidth) - event.pageX < o.scrollSensitivity) 
this.scrollParent[0].scrollLeft = scrolled = this.scrollParent[0].scrollLeft + o.scrollSpeed; 
else if(event.pageX - this.overflowOffset.left < o.scrollSensitivity) 
this.scrollParent[0].scrollLeft = scrolled = this.scrollParent[0].scrollLeft - o.scrollSpeed; 
} else { 
if(event.pageY - $(document).scrollTop() < o.scrollSensitivity) 
scrolled = $(document).scrollTop($(document).scrollTop() - o.scrollSpeed); 
else if($(window).height() - (event.pageY - $(document).scrollTop()) < o.scrollSensitivity) 
scrolled = $(document).scrollTop($(document).scrollTop() + o.scrollSpeed); 
if(event.pageX - $(document).scrollLeft() < o.scrollSensitivity) 
scrolled = $(document).scrollLeft($(document).scrollLeft() - o.scrollSpeed); 
else if($(window).width() - (event.pageX - $(document).scrollLeft()) < o.scrollSensitivity) 
scrolled = $(document).scrollLeft($(document).scrollLeft() + o.scrollSpeed); 
} 
if(scrolled !== false && $.ui.ddmanager && !o.dropBehaviour) 
$.ui.ddmanager.prepareOffsets(this, event); 
} 
//Regenerate the absolute position used for position checks 
this.positionAbs = this._convertPositionTo("absolute"); 
//Set the helper position 
if(!this.options.axis || this.options.axis != "y") this.helper[0].style.left = this.position.left+&#39;px&#39;; 
if(!this.options.axis || this.options.axis != "x") this.helper[0].style.top = this.position.top+&#39;px&#39;; 
//Rearrange 
for (var i = this.items.length - 1; i >= 0; i--) { 
//Cache variables and intersection, continue if no intersection 
var item = this.items[i], itemElement = item.item[0], intersection = this._intersectsWithPointer(item); 
if (!intersection) continue; 
if(itemElement != this.currentItem[0] //cannot intersect with itself 
&& this.placeholder[intersection == 1 ? "next" : "prev"]()[0] != itemElement //no useless actions that have been done before 
&& !$.ui.contains(this.placeholder[0], itemElement) //no action if the item moved is the parent of the item checked 
&& (this.options.type == &#39;semi-dynamic&#39; ? !$.ui.contains(this.element[0], itemElement) : true) 
) { 
this.direction = intersection == 1 ? "down" : "up"; 
if (this.options.tolerance == "pointer" || this._intersectsWithSides(item)) { 
this._rearrange(event, item); 
} else { 
break; 
} 
this._trigger("change", event, this._uiHash()); 
break; 
} 
} 
//Post events to containers 
this._contactContainers(event); 
//Interconnect with droppables 
if($.ui.ddmanager) $.ui.ddmanager.drag(this, event); 
//Call callbacks 
this._trigger(&#39;sort&#39;, event, this._uiHash()); 
this.lastPositionAbs = this.positionAbs; 
return false; 
}, 
_mouseStop: function(event, noPropagation) { 
if(!event) return; 
//If we are using droppables, inform the manager about the drop 
if ($.ui.ddmanager && !this.options.dropBehaviour) 
$.ui.ddmanager.drop(this, event); 
if(this.options.revert) { 
var self = this; 
var cur = self.placeholder.offset(); 
self.reverting = true; 
$(this.helper).animate({ 
left: cur.left - this.offset.parent.left - self.margins.left + (this.offsetParent[0] == document.body ? 0 : this.offsetParent[0].scrollLeft), 
top: cur.top - this.offset.parent.top - self.margins.top + (this.offsetParent[0] == document.body ? 0 : this.offsetParent[0].scrollTop) 
}, parseInt(this.options.revert, 10) || 500, function() { 
self._clear(event); 
}); 
} else { 
this._clear(event, noPropagation); 
} 
return false; 
}, 
cancel: function() { 
var self = this; 
if(this.dragging) { 
this._mouseUp(); 
if(this.options.helper == "original") 
this.currentItem.css(this._storedCSS).removeClass("ui-sortable-helper"); 
else 
this.currentItem.show(); 
//Post deactivating events to containers 
for (var i = this.containers.length - 1; i >= 0; i--){ 
this.containers[i]._trigger("deactivate", null, self._uiHash(this)); 
if(this.containers[i].containerCache.over) { 
this.containers[i]._trigger("out", null, self._uiHash(this)); 
this.containers[i].containerCache.over = 0; 
} 
} 
} 
//$(this.placeholder[0]).remove(); would have been the jQuery way - unfortunately, it unbinds ALL events from the original node! 
if(this.placeholder[0].parentNode) this.placeholder[0].parentNode.removeChild(this.placeholder[0]); 
if(this.options.helper != "original" && this.helper && this.helper[0].parentNode) this.helper.remove(); 
$.extend(this, { 
helper: null, 
dragging: false, 
reverting: false, 
_noFinalSort: null 
}); 
if(this.domPosition.prev) { 
$(this.domPosition.prev).after(this.currentItem); 
} else { 
$(this.domPosition.parent).prepend(this.currentItem); 
} 
return true; 
}, 
serialize: function(o) { 
var items = this._getItemsAsjQuery(o && o.connected); 
var str = []; o = o || {}; 
$(items).each(function() { 
var res = ($(o.item || this).attr(o.attribute || &#39;id&#39;) || &#39;&#39;).match(o.expression || (/(.+)[-=_](.+)/)); 
if(res) str.push((o.key || res[1]+&#39;[]&#39;)+&#39;=&#39;+(o.key && o.expression ? res[1] : res[2])); 
}); 
return str.join(&#39;&&#39;); 
}, 
toArray: function(o) { 
var items = this._getItemsAsjQuery(o && o.connected); 
var ret = []; o = o || {}; 
items.each(function() { ret.push($(o.item || this).attr(o.attribute || &#39;id&#39;) || &#39;&#39;); }); 
return ret; 
}, 
/* Be careful with the following core functions */ 
_intersectsWith: function(item) { 
var x1 = this.positionAbs.left, 
x2 = x1 + this.helperProportions.width, 
y1 = this.positionAbs.top, 
y2 = y1 + this.helperProportions.height; 
var l = item.left, 
r = l + item.width, 
t = item.top, 
b = t + item.height; 
var dyClick = this.offset.click.top, 
dxClick = this.offset.click.left; 
var isOverElement = (y1 + dyClick) > t && (y1 + dyClick) < b && (x1 + dxClick) > l && (x1 + dxClick) < r; 
if( this.options.tolerance == "pointer" 
|| this.options.forcePointerForContainers 
|| (this.options.tolerance != "pointer" && this.helperProportions[this.floating ? &#39;width&#39; : &#39;height&#39;] > item[this.floating ? &#39;width&#39; : &#39;height&#39;]) 
) { 
return isOverElement; 
} else { 
return (l < x1 + (this.helperProportions.width / 2) // Right Half 
&& x2 - (this.helperProportions.width / 2) < r // Left Half 
&& t < y1 + (this.helperProportions.height / 2) // Bottom Half 
&& y2 - (this.helperProportions.height / 2) < b ); // Top Half 
} 
}, 
_intersectsWithPointer: function(item) { 
var isOverElementHeight = $.ui.isOverAxis(this.positionAbs.top + this.offset.click.top, item.top, item.height), 
isOverElementWidth = $.ui.isOverAxis(this.positionAbs.left + this.offset.click.left, item.left, item.width), 
isOverElement = isOverElementHeight && isOverElementWidth, 
verticalDirection = this._getDragVerticalDirection(), 
horizontalDirection = this._getDragHorizontalDirection(); 
if (!isOverElement) 
return false; 
return this.floating ? 
( ((horizontalDirection && horizontalDirection == "right") || verticalDirection == "down") ? 2 : 1 ) 
: ( verticalDirection && (verticalDirection == "down" ? 2 : 1) ); 
}, 
_intersectsWithSides: function(item) { 
var isOverBottomHalf = $.ui.isOverAxis(this.positionAbs.top + this.offset.click.top, item.top + (item.height/2), item.height), 
isOverRightHalf = $.ui.isOverAxis(this.positionAbs.left + this.offset.click.left, item.left + (item.width/2), item.width), 
verticalDirection = this._getDragVerticalDirection(), 
horizontalDirection = this._getDragHorizontalDirection(); 
if (this.floating && horizontalDirection) { 
return ((horizontalDirection == "right" && isOverRightHalf) || (horizontalDirection == "left" && !isOverRightHalf)); 
} else { 
return verticalDirection && ((verticalDirection == "down" && isOverBottomHalf) || (verticalDirection == "up" && !isOverBottomHalf)); 
} 
}, 
_getDragVerticalDirection: function() { 
var delta = this.positionAbs.top - this.lastPositionAbs.top; 
return delta != 0 && (delta > 0 ? "down" : "up"); 
}, 
_getDragHorizontalDirection: function() { 
var delta = this.positionAbs.left - this.lastPositionAbs.left; 
return delta != 0 && (delta > 0 ? "right" : "left"); 
}, 
refresh: function(event) { 
this._refreshItems(event); 
this.refreshPositions(); 
}, 
_connectWith: function() { 
var options = this.options; 
return options.connectWith.constructor == String 
? [options.connectWith] 
: options.connectWith; 
}, 
_getItemsAsjQuery: function(connected) { 
var self = this; 
var items = []; 
var queries = []; 
var connectWith = this._connectWith(); 
if(connectWith && connected) { 
for (var i = connectWith.length - 1; i >= 0; i--){ 
var cur = $(connectWith[i]); 
for (var j = cur.length - 1; j >= 0; j--){ 
var inst = $.data(cur[j], &#39;sortable&#39;); 
if(inst && inst != this && !inst.options.disabled) { 
queries.push([$.isFunction(inst.options.items) ? inst.options.items.call(inst.element) : $(inst.options.items, inst.element).not(".ui-sortable-helper"), inst]); 
} 
}; 
}; 
} 
queries.push([$.isFunction(this.options.items) ? this.options.items.call(this.element, null, { options: this.options, item: this.currentItem }) : $(this.options.items, this.element).not(".ui-sortable-helper"), this]); 
for (var i = queries.length - 1; i >= 0; i--){ 
queries[i][0].each(function() { 
items.push(this); 
}); 
}; 
return $(items); 
}, 
_removeCurrentsFromItems: function() { 
var list = this.currentItem.find(":data(sortable-item)"); 
for (var i=0; i < this.items.length; i++) { 
for (var j=0; j < list.length; j++) { 
if(list[j] == this.items[i].item[0]) 
this.items.splice(i,1); 
}; 
}; 
}, 
_refreshItems: function(event) { 
this.items = []; 
this.containers = [this]; 
var items = this.items; 
var self = this; 
var queries = [[$.isFunction(this.options.items) ? this.options.items.call(this.element[0], event, { item: this.currentItem }) : $(this.options.items, this.element), this]]; 
var connectWith = this._connectWith(); 
if(connectWith) { 
for (var i = connectWith.length - 1; i >= 0; i--){ 
var cur = $(connectWith[i]); 
for (var j = cur.length - 1; j >= 0; j--){ 
var inst = $.data(cur[j], &#39;sortable&#39;); 
if(inst && inst != this && !inst.options.disabled) { 
queries.push([$.isFunction(inst.options.items) ? inst.options.items.call(inst.element[0], event, { item: this.currentItem }) : $(inst.options.items, inst.element), inst]); 
this.containers.push(inst); 
} 
}; 
}; 
} 
for (var i = queries.length - 1; i >= 0; i--) { 
var targetData = queries[i][1]; 
var _queries = queries[i][0]; 
for (var j=0, queriesLength = _queries.length; j < queriesLength; j++) { 
var item = $(_queries[j]); 
item.data(&#39;sortable-item&#39;, targetData); // Data for target checking (mouse manager) 
items.push({ 
item: item, 
instance: targetData, 
width: 0, height: 0, 
left: 0, top: 0 
}); 
}; 
}; 
}, 
refreshPositions: function(fast) { 
//This has to be redone because due to the item being moved out/into the offsetParent, the offsetParent&#39;s position will change 
if(this.offsetParent && this.helper) { 
this.offset.parent = this._getParentOffset(); 
} 
for (var i = this.items.length - 1; i >= 0; i--){ 
var item = this.items[i]; 
//We ignore calculating positions of all connected containers when we&#39;re not over them 
if(item.instance != this.currentContainer && this.currentContainer && item.item[0] != this.currentItem[0]) 
continue; 
var t = this.options.toleranceElement ? $(this.options.toleranceElement, item.item) : item.item; 
if (!fast) { 
item.width = t.outerWidth(); 
item.height = t.outerHeight(); 
} 
var p = t.offset(); 
item.left = p.left; 
item.top = p.top; 
}; 
if(this.options.custom && this.options.custom.refreshContainers) { 
this.options.custom.refreshContainers.call(this); 
} else { 
for (var i = this.containers.length - 1; i >= 0; i--){ 
var p = this.containers[i].element.offset(); 
this.containers[i].containerCache.left = p.left; 
this.containers[i].containerCache.top = p.top; 
this.containers[i].containerCache.width = this.containers[i].element.outerWidth(); 
this.containers[i].containerCache.height = this.containers[i].element.outerHeight(); 
}; 
} 
}, 
_createPlaceholder: function(that) { 
var self = that || this, o = self.options; 
if(!o.placeholder || o.placeholder.constructor == String) { 
var className = o.placeholder; 
o.placeholder = { 
element: function() { 
var el = $(document.createElement(self.currentItem[0].nodeName)) 
.addClass(className || self.currentItem[0].className+" ui-sortable-placeholder") 
.removeClass("ui-sortable-helper")[0]; 
if(!className) 
el.style.visibility = "hidden"; 
return el; 
}, 
update: function(container, p) { 
// 1. If a className is set as &#39;placeholder option, we don&#39;t force sizes - the class is responsible for that 
// 2. The option &#39;forcePlaceholderSize can be enabled to force it even if a class name is specified 
if(className && !o.forcePlaceholderSize) return; 
//If the element doesn&#39;t have a actual height by itself (without styles coming from a stylesheet), it receives the inline height from the dragged item 
if(!p.height()) { p.height(self.currentItem.innerHeight() - parseInt(self.currentItem.css(&#39;paddingTop&#39;)||0, 10) - parseInt(self.currentItem.css(&#39;paddingBottom&#39;)||0, 10)); }; 
if(!p.width()) { p.width(self.currentItem.innerWidth() - parseInt(self.currentItem.css(&#39;paddingLeft&#39;)||0, 10) - parseInt(self.currentItem.css(&#39;paddingRight&#39;)||0, 10)); }; 
} 
}; 
} 
//Create the placeholder 
self.placeholder = $(o.placeholder.element.call(self.element, self.currentItem)); 
//Append it after the actual current item 
self.currentItem.after(self.placeholder); 
//Update the size of the placeholder (TODO: Logic to fuzzy, see line 316/317) 
o.placeholder.update(self, self.placeholder); 
}, 
_contactContainers: function(event) { 
for (var i = this.containers.length - 1; i >= 0; i--){ 
if(this._intersectsWith(this.containers[i].containerCache)) { 
if(!this.containers[i].containerCache.over) { 
if(this.currentContainer != this.containers[i]) { 
//When entering a new container, we will find the item with the least distance and append our item near it 
var dist = 10000; var itemWithLeastDistance = null; var base = this.positionAbs[this.containers[i].floating ? &#39;left&#39; : &#39;top&#39;]; 
for (var j = this.items.length - 1; j >= 0; j--) { 
if(!$.ui.contains(this.containers[i].element[0], this.items[j].item[0])) continue; 
var cur = this.items[j][this.containers[i].floating ? &#39;left&#39; : &#39;top&#39;]; 
if(Math.abs(cur - base) < dist) { 
dist = Math.abs(cur - base); itemWithLeastDistance = this.items[j]; 
} 
} 
if(!itemWithLeastDistance && !this.options.dropOnEmpty) //Check if dropOnEmpty is enabled 
continue; 
this.currentContainer = this.containers[i]; 
itemWithLeastDistance ? this._rearrange(event, itemWithLeastDistance, null, true) : this._rearrange(event, null, this.containers[i].element, true); 
this._trigger("change", event, this._uiHash()); 
this.containers[i]._trigger("change", event, this._uiHash(this)); 
//Update the placeholder 
this.options.placeholder.update(this.currentContainer, this.placeholder); 
} 
this.containers[i]._trigger("over", event, this._uiHash(this)); 
this.containers[i].containerCache.over = 1; 
} 
} else { 
if(this.containers[i].containerCache.over) { 
this.containers[i]._trigger("out", event, this._uiHash(this)); 
this.containers[i].containerCache.over = 0; 
} 
} 
}; 
}, 
_createHelper: function(event) { 
var o = this.options; 
var helper = $.isFunction(o.helper) ? $(o.helper.apply(this.element[0], [event, this.currentItem])) : (o.helper == &#39;clone&#39; ? this.currentItem.clone() : this.currentItem); 
if(!helper.parents(&#39;body&#39;).length) //Add the helper to the DOM if that didn&#39;t happen already 
$(o.appendTo != &#39;parent&#39; ? o.appendTo : this.currentItem[0].parentNode)[0].appendChild(helper[0]); 
if(helper[0] == this.currentItem[0]) 
this._storedCSS = { width: this.currentItem[0].style.width, height: this.currentItem[0].style.height, position: this.currentItem.css("position"), top: this.currentItem.css("top"), left: this.currentItem.css("left") }; 
if(helper[0].style.width == &#39;&#39; || o.forceHelperSize) helper.width(this.currentItem.width()); 
if(helper[0].style.height == &#39;&#39; || o.forceHelperSize) helper.height(this.currentItem.height()); 
return helper; 
}, 
_adjustOffsetFromHelper: function(obj) { 
if(obj.left != undefined) this.offset.click.left = obj.left + this.margins.left; 
if(obj.right != undefined) this.offset.click.left = this.helperProportions.width - obj.right + this.margins.left; 
if(obj.top != undefined) this.offset.click.top = obj.top + this.margins.top; 
if(obj.bottom != undefined) this.offset.click.top = this.helperProportions.height - obj.bottom + this.margins.top; 
}, 
_getParentOffset: function() { 
//Get the offsetParent and cache its position 
this.offsetParent = this.helper.offsetParent(); 
var po = this.offsetParent.offset(); 
// This is a special case where we need to modify a offset calculated on start, since the following happened: 
// 1. The position of the helper is absolute, so it&#39;s position is calculated based on the next positioned parent 
// 2. The actual offset parent is a child of the scroll parent, and the scroll parent isn&#39;t the document, which means that 
// the scroll is included in the initial calculation of the offset of the parent, and never recalculated upon drag 
if(this.cssPosition == &#39;absolute&#39; && this.scrollParent[0] != document && $.ui.contains(this.scrollParent[0], this.offsetParent[0])) { 
po.left += this.scrollParent.scrollLeft(); 
po.top += this.scrollParent.scrollTop(); 
} 
if((this.offsetParent[0] == document.body) //This needs to be actually done for all browsers, since pageX/pageY includes this information 
|| (this.offsetParent[0].tagName && this.offsetParent[0].tagName.toLowerCase() == &#39;html&#39; && $.browser.msie)) //Ugly IE fix 
po = { top: 0, left: 0 }; 
return { 
top: po.top + (parseInt(this.offsetParent.css("borderTopWidth"),10) || 0), 
left: po.left + (parseInt(this.offsetParent.css("borderLeftWidth"),10) || 0) 
}; 
}, 
_getRelativeOffset: function() { 
if(this.cssPosition == "relative") { 
var p = this.currentItem.position(); 
return { 
top: p.top - (parseInt(this.helper.css("top"),10) || 0) + this.scrollParent.scrollTop(), 
left: p.left - (parseInt(this.helper.css("left"),10) || 0) + this.scrollParent.scrollLeft() 
}; 
} else { 
return { top: 0, left: 0 }; 
} 
}, 
_cacheMargins: function() { 
this.margins = { 
left: (parseInt(this.currentItem.css("marginLeft"),10) || 0), 
top: (parseInt(this.currentItem.css("marginTop"),10) || 0) 
}; 
}, 
_cacheHelperProportions: function() { 
this.helperProportions = { 
width: this.helper.outerWidth(), 
height: this.helper.outerHeight() 
}; 
}, 
_setContainment: function() { 
var o = this.options; 
if(o.containment == &#39;parent&#39;) o.containment = this.helper[0].parentNode; 
if(o.containment == &#39;document&#39; || o.containment == &#39;window&#39;) this.containment = [ 
0 - this.offset.relative.left - this.offset.parent.left, 
0 - this.offset.relative.top - this.offset.parent.top, 
$(o.containment == &#39;document&#39; ? document : window).width() - this.helperProportions.width - this.margins.left, 
($(o.containment == &#39;document&#39; ? document : window).height() || document.body.parentNode.scrollHeight) - this.helperProportions.height - this.margins.top 
]; 
if(!(/^(document|window|parent)$/).test(o.containment)) { 
var ce = $(o.containment)[0]; 
var co = $(o.containment).offset(); 
var over = ($(ce).css("overflow") != &#39;hidden&#39;); 
this.containment = [ 
co.left + (parseInt($(ce).css("borderLeftWidth"),10) || 0) + (parseInt($(ce).css("paddingLeft"),10) || 0) - this.margins.left, 
co.top + (parseInt($(ce).css("borderTopWidth"),10) || 0) + (parseInt($(ce).css("paddingTop"),10) || 0) - this.margins.top, 
co.left+(over ? Math.max(ce.scrollWidth,ce.offsetWidth) : ce.offsetWidth) - (parseInt($(ce).css("borderLeftWidth"),10) || 0) - (parseInt($(ce).css("paddingRight"),10) || 0) - this.helperProportions.width - this.margins.left, 
co.top+(over ? Math.max(ce.scrollHeight,ce.offsetHeight) : ce.offsetHeight) - (parseInt($(ce).css("borderTopWidth"),10) || 0) - (parseInt($(ce).css("paddingBottom"),10) || 0) - this.helperProportions.height - this.margins.top 
]; 
} 
}, 
_convertPositionTo: function(d, pos) { 
if(!pos) pos = this.position; 
var mod = d == "absolute" ? 1 : -1; 
var o = this.options, scroll = this.cssPosition == &#39;absolute&#39; && !(this.scrollParent[0] != document && $.ui.contains(this.scrollParent[0], this.offsetParent[0])) ? this.offsetParent : this.scrollParent, scrollIsRootNode = (/(html|body)/i).test(scroll[0].tagName); 
return { 
top: ( 
pos.top // The absolute mouse position 
+ this.offset.relative.top * mod // Only for relative positioned nodes: Relative offset from element to offset parent 
+ this.offset.parent.top * mod // The offsetParent&#39;s offset without borders (offset + border) 
- ($.browser.safari && this.cssPosition == &#39;fixed&#39; ? 0 : ( this.cssPosition == &#39;fixed&#39; ? -this.scrollParent.scrollTop() : ( scrollIsRootNode ? 0 : scroll.scrollTop() ) ) * mod) 
), 
left: ( 
pos.left // The absolute mouse position 
+ this.offset.relative.left * mod // Only for relative positioned nodes: Relative offset from element to offset parent 
+ this.offset.parent.left * mod // The offsetParent&#39;s offset without borders (offset + border) 
- ($.browser.safari && this.cssPosition == &#39;fixed&#39; ? 0 : ( this.cssPosition == &#39;fixed&#39; ? -this.scrollParent.scrollLeft() : scrollIsRootNode ? 0 : scroll.scrollLeft() ) * mod) 
) 
}; 
}, 
_generatePosition: function(event) { 
var o = this.options, scroll = this.cssPosition == &#39;absolute&#39; && !(this.scrollParent[0] != document && $.ui.contains(this.scrollParent[0], this.offsetParent[0])) ? this.offsetParent : this.scrollParent, scrollIsRootNode = (/(html|body)/i).test(scroll[0].tagName); 
// This is another very weird special case that only happens for relative elements: 
// 1. If the css position is relative 
// 2. and the scroll parent is the document or similar to the offset parent 
// we have to refresh the relative offset during the scroll so there are no jumps 
if(this.cssPosition == &#39;relative&#39; && !(this.scrollParent[0] != document && this.scrollParent[0] != this.offsetParent[0])) { 
this.offset.relative = this._getRelativeOffset(); 
} 
var pageX = event.pageX; 
var pageY = event.pageY; 
/* 
* - Position constraining - 
* Constrain the position to a mix of grid, containment. 
*/ 
if(this.originalPosition) { //If we are not dragging yet, we won&#39;t check for options 
if(this.containment) { 
if(event.pageX - this.offset.click.left < this.containment[0]) pageX = this.containment[0] + this.offset.click.left; 
if(event.pageY - this.offset.click.top < this.containment[1]) pageY = this.containment[1] + this.offset.click.top; 
if(event.pageX - this.offset.click.left > this.containment[2]) pageX = this.containment[2] + this.offset.click.left; 
if(event.pageY - this.offset.click.top > this.containment[3]) pageY = this.containment[3] + this.offset.click.top; 
} 
if(o.grid) { 
var top = this.originalPageY + Math.round((pageY - this.originalPageY) / o.grid[1]) * o.grid[1]; 
pageY = this.containment ? (!(top - this.offset.click.top < this.containment[1] || top - this.offset.click.top > this.containment[3]) ? top : (!(top - this.offset.click.top < this.containment[1]) ? top - o.grid[1] : top + o.grid[1])) : top; 
var left = this.originalPageX + Math.round((pageX - this.originalPageX) / o.grid[0]) * o.grid[0]; 
pageX = this.containment ? (!(left - this.offset.click.left < this.containment[0] || left - this.offset.click.left > this.containment[2]) ? left : (!(left - this.offset.click.left < this.containment[0]) ? left - o.grid[0] : left + o.grid[0])) : left; 
} 
} 
return { 
top: ( 
pageY // The absolute mouse position 
- this.offset.click.top // Click offset (relative to the element) 
- this.offset.relative.top // Only for relative positioned nodes: Relative offset from element to offset parent 
- this.offset.parent.top // The offsetParent&#39;s offset without borders (offset + border) 
+ ($.browser.safari && this.cssPosition == &#39;fixed&#39; ? 0 : ( this.cssPosition == &#39;fixed&#39; ? -this.scrollParent.scrollTop() : ( scrollIsRootNode ? 0 : scroll.scrollTop() ) )) 
), 
left: ( 
pageX // The absolute mouse position 
- this.offset.click.left // Click offset (relative to the element) 
- this.offset.relative.left // Only for relative positioned nodes: Relative offset from element to offset parent 
- this.offset.parent.left // The offsetParent&#39;s offset without borders (offset + border) 
+ ($.browser.safari && this.cssPosition == &#39;fixed&#39; ? 0 : ( this.cssPosition == &#39;fixed&#39; ? -this.scrollParent.scrollLeft() : scrollIsRootNode ? 0 : scroll.scrollLeft() )) 
) 
}; 
}, 
_rearrange: function(event, i, a, hardRefresh) { 
a ? a[0].appendChild(this.placeholder[0]) : i.item[0].parentNode.insertBefore(this.placeholder[0], (this.direction == &#39;down&#39; ? i.item[0] : i.item[0].nextSibling)); 
//Various things done here to improve the performance: 
// 1. we create a setTimeout, that calls refreshPositions 
// 2. on the instance, we have a counter variable, that get&#39;s higher after every append 
// 3. on the local scope, we copy the counter variable, and check in the timeout, if it&#39;s still the same 
// 4. this lets only the last addition to the timeout stack through 
this.counter = this.counter ? ++this.counter : 1; 
var self = this, counter = this.counter; 
window.setTimeout(function() { 
if(counter == self.counter) self.refreshPositions(!hardRefresh); //Precompute after each DOM insertion, NOT on mousemove 
},0); 
}, 
_clear: function(event, noPropagation) { 
this.reverting = false; 
// We delay all events that have to be triggered to after the point where the placeholder has been removed and 
// everything else normalized again 
var delayedTriggers = [], self = this; 
// We first have to update the dom position of the actual currentItem 
// Note: don&#39;t do it if the current item is already removed (by a user), or it gets reappended (see #4088) 
if(!this._noFinalSort && this.currentItem[0].parentNode) this.placeholder.before(this.currentItem); 
this._noFinalSort = null; 
if(this.helper[0] == this.currentItem[0]) { 
for(var i in this._storedCSS) { 
if(this._storedCSS[i] == &#39;auto&#39; || this._storedCSS[i] == &#39;static&#39;) this._storedCSS[i] = &#39;&#39;; 
} 
this.currentItem.css(this._storedCSS).removeClass("ui-sortable-helper"); 
} else { 
this.currentItem.show(); 
} 
if(this.fromOutside && !noPropagation) delayedTriggers.push(function(event) { this._trigger("receive", event, this._uiHash(this.fromOutside)); }); 
if((this.fromOutside || this.domPosition.prev != this.currentItem.prev().not(".ui-sortable-helper")[0] || this.domPosition.parent != this.currentItem.parent()[0]) && !noPropagation) delayedTriggers.push(function(event) { this._trigger("update", event, this._uiHash()); }); //Trigger update callback if the DOM position has changed 
if(!$.ui.contains(this.element[0], this.currentItem[0])) { //Node was moved out of the current element 
if(!noPropagation) delayedTriggers.push(function(event) { this._trigger("remove", event, this._uiHash()); }); 
for (var i = this.containers.length - 1; i >= 0; i--){ 
if($.ui.contains(this.containers[i].element[0], this.currentItem[0]) && !noPropagation) { 
delayedTriggers.push((function(c) { return function(event) { c._trigger("receive", event, this._uiHash(this)); }; }).call(this, this.containers[i])); 
delayedTriggers.push((function(c) { return function(event) { c._trigger("update", event, this._uiHash(this)); }; }).call(this, this.containers[i])); 
} 
}; 
}; 
//Post events to containers 
for (var i = this.containers.length - 1; i >= 0; i--){ 
if(!noPropagation) delayedTriggers.push((function(c) { return function(event) { c._trigger("deactivate", event, this._uiHash(this)); }; }).call(this, this.containers[i])); 
if(this.containers[i].containerCache.over) { 
delayedTriggers.push((function(c) { return function(event) { c._trigger("out", event, this._uiHash(this)); }; }).call(this, this.containers[i])); 
this.containers[i].containerCache.over = 0; 
} 
} 
//Do what was originally in plugins 
if(this._storedCursor) $(&#39;body&#39;).css("cursor", this._storedCursor); //Reset cursor 
if(this._storedOpacity) this.helper.css("opacity", this._storedOpacity); //Reset cursor 
if(this._storedZIndex) this.helper.css("zIndex", this._storedZIndex == &#39;auto&#39; ? &#39;&#39; : this._storedZIndex); //Reset z-index 
this.dragging = false; 
if(this.cancelHelperRemoval) { 
if(!noPropagation) { 
this._trigger("beforeStop", event, this._uiHash()); 
for (var i=0; i < delayedTriggers.length; i++) { delayedTriggers[i].call(this, event); }; //Trigger all delayed events 
this._trigger("stop", event, this._uiHash()); 
} 
return false; 
} 
if(!noPropagation) this._trigger("beforeStop", event, this._uiHash()); 
//$(this.placeholder[0]).remove(); would have been the jQuery way - unfortunately, it unbinds ALL events from the original node! 
this.placeholder[0].parentNode.removeChild(this.placeholder[0]); 
if(this.helper[0] != this.currentItem[0]) this.helper.remove(); this.helper = null; 
if(!noPropagation) { 
for (var i=0; i < delayedTriggers.length; i++) { delayedTriggers[i].call(this, event); }; //Trigger all delayed events 
this._trigger("stop", event, this._uiHash()); 
} 
this.fromOutside = false; 
return true; 
}, 
_trigger: function() { 
if ($.widget.prototype._trigger.apply(this, arguments) === false) { 
this.cancel(); 
} 
}, 
_uiHash: function(inst) { 
var self = inst || this; 
return { 
helper: self.helper, 
placeholder: self.placeholder || $([]), 
position: self.position, 
absolutePosition: self.positionAbs, //deprecated 
offset: self.positionAbs, 
item: self.currentItem, 
sender: inst ? inst.element : null 
}; 
} 
})); 
$.extend($.ui.sortable, { 
getter: "serialize toArray", 
version: "1.7.1", 
eventPrefix: "sort", 
defaults: { 
appendTo: "parent", 
axis: false, 
cancel: ":input,option", 
connectWith: false, 
containment: false, 
cursor: &#39;auto&#39;, 
cursorAt: false, 
delay: 0, 
distance: 1, 
dropOnEmpty: true, 
forcePlaceholderSize: false, 
forceHelperSize: false, 
grid: false, 
handle: false, 
helper: "original", 
items: &#39;> *&#39;, 
opacity: false, 
placeholder: false, 
revert: false, 
scroll: true, 
scrollSensitivity: 20, 
scrollSpeed: 20, 
scope: "default", 
tolerance: "intersect", 
zIndex: 1000 
} 
}); 
})(jQuery);

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

jQuery对表格标题排序

jquery实现根据中文表格排序

The above is the detailed content of jquery mouse dragging Table to sort (code attached). For more information, please follow other related articles on the PHP Chinese website!

php jquery table
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：jQuery sort table titlesNext article：jQuery sort table titles

Related articles

See more