jquery实现的鼠标拖动排序Li或Table


Posted in Javascript onMay 04, 2014

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 () { 
$('.sortable').sortable({ cursor: 'move' }); 
}); 
</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('toArray'); 
$(":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 + ','; 
} 
} 
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('sitelinks','text')" 
value="保存顺序" /> 
</td> 
<td width="50%" align="right"> 
提示:按住鼠标拖动链接,之后单击保存按钮就可以完成对链接的排列 
</td> 
</tr> 
<tr> 
<td width="100%" colspan="2" align="center" style="background-color: #F6F6F6;"> 
<div id="tabs"> 
<div id="tabs-sitelinks-text"> 
<div 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('sitelinks','text','96')"><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='http://10.1.3.203:6001/Manager/MenuPages/PhoneManage/ArticleImg/201312023422.jpg ' 
alt='法国时代复分大占地方' /> 
</td> 
</tr> 
<tr> 
<td> 
<b>文章URL:</b> 
</td> 
<td> 
<a href='http://www.uzai.com/trip/27879.html?46400284' 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('sitelinks','text','78')"><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='http://10.1.3.203:6001/Manager/MenuPages/PhoneManage/ArticleImg/201312023115.jpg ' 
alt='医保结余7000亿花不出去 官员建议提高报销比例007' /> 
</td> 
</tr> 
<tr> 
<td> 
<b>文章URL:</b> 
</td> 
<td> 
<a href='http://finance.sina.com.cn/china/20131202/011217492954.shtml' 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('sitelinks','text','94')"><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='http://10.1.3.203:6001/Manager/MenuPages/PhoneManage/ArticleImg/201312021700.jpg ' 
alt='新浪科技“因你而变”:卡片式社交首页新版上线' /> 
</td> 
</tr> 
<tr> 
<td> 
<b>文章URL:</b> 
</td> 
<td> 
<a href='http://tech.sina.com.cn/i/2013-12-02/00158965413.shtml' 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('sitelinks','text','91')"><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='http://10.1.3.203:6001/Manager/MenuPages/PhoneManage/ArticleImg/201312020214.jpg ' 
alt='教授拒入普通病房:我的命十个人都换不来001' /> 
</td> 
</tr> 
<tr> 
<td> 
<b>文章URL:</b> 
</td> 
<td> 
<a href='http://news.sohu.com/20131202/n391116380.shtml' 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('sitelinks','text','79')"><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='http://10.1.3.203:6001/Manager/MenuPages/PhoneManage/ArticleImg/201312023939.jpg ' 
alt='广东打击伪基站抓百人 首例案件开审9人批捕002' /> 
</td> 
</tr> 
<tr> 
<td> 
<b>文章URL:</b> 
</td> 
<td> 
<a href='http://tech.sina.com.cn/t/2013-12-02/01148965434.shtml' 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('sitelinks','text','81')"><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='http://10.1.3.203:6001/Manager/MenuPages/PhoneManage/ArticleImg/201312024135.jpg ' 
alt='1男1女从南昌大学图书馆坠亡 女死者为该校学生003' /> 
</td> 
</tr> 
<tr> 
<td> 
<b>文章URL:</b> 
</td> 
<td> 
<a href='http://news.sina.com.cn/s/2013-12-02/115128865820.shtml' 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('sitelinks','text','77')"><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='http://10.1.3.203:6001/Manager/MenuPages/PhoneManage/ArticleImg/201312022910.jpg ' 
alt='河南车主遭罚服毒调查:每月办3000元月票可免罚004' /> 
</td> 
</tr> 
<tr> 
<td> 
<b>文章URL:</b> 
</td> 
<td> 
<a href='http://news.sina.com.cn/c/2013-12-02/023928862436.shtml' 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('sitelinks','text','82')"><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='http://10.1.3.203:6001/Manager/MenuPages/PhoneManage/ArticleImg/201312024219.jpg ' 
alt='大学生见义勇为被连捅三刀 因家贫无钱医治(图)005' /> 
</td> 
</tr> 
<tr> 
<td> 
<b>文章URL:</b> 
</td> 
<td> 
<a href='http://news.sina.com.cn/s/2013-12-02/052028863120.shtml' 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('sitelinks','text','80')"><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='http://10.1.3.203:6001/Manager/MenuPages/PhoneManage/ArticleImg/201312024034.jpg ' 
alt='676帽!韦德刷新盖帽纪录 前辈1100场他只用679场006' /> 
</td> 
</tr> 
<tr> 
<td> 
<b>文章URL:</b> 
</td> 
<td> 
<a href='http://sports.sina.com.cn/nba/2013-12-02/10006913299.shtml' 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('sitelinks','text','83')"><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='http://10.1.3.203:6001/Manager/MenuPages/PhoneManage/ArticleImg/201312024516.jpg ' 
alt='8岁大妈秀腹肌健壮,长相神秘还被曝已有两小孩008' /> 
</td> 
</tr> 
<tr> 
<td> 
<b>文章URL:</b> 
</td> 
<td> 
<a href='http://net.chinabyte.com/442/12792942.shtml' target="_blank">http://net.chinabyte.com/442/12792942.shtml</a> 
</td> 
</tr> 
</table> 
</li> 
</ul> 
</div> 
</div> 
</div> 
</td> 
</tr> 
</table> 
</form> 
</body> 
</html> 

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\0;} 
a.btn{padding:3px 6px;} 
.btn:hover{background:#eee;text-decoration:none;} 
.btn-on,.fn-pager input[type='submit']{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='submit']: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('overflow') == 'hidden') { return false; } 
var scroll = (a && a == 'left') ? 'scrollLeft' : 'scrollTop', 
has = false; 
if (el[scroll] > 0) { return true; } 
// TODO: determine which cases actually cause this to happen 
// if the element doesn't have the scroll set, see if it'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_DIVIDE: 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 == 'role' 
? (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('unselectable', 'off') 
.css('MozUserSelect', '') 
.unbind('selectstart.ui'); 
}, 
disableSelection: function() { 
return this 
.attr('unselectable', 'on') 
.css('MozUserSelect', 'none') 
.bind('selectstart.ui', function() { return false; }); 
}, 
scrollParent: function() { 
var scrollParent; 
if(($.browser.msie && (/(static|relative)/).test(this.css('position'))) || (/absolute/).test(this.css('position'))) { 
scrollParent = this.parents().filter(function() { 
return (/(relative|absolute|fixed)/).test($.curCSS(this,'position',1)) && (/(auto|scroll)/).test($.curCSS(this,'overflow',1)+$.curCSS(this,'overflow-y',1)+$.curCSS(this,'overflow-x',1)); 
}).eq(0); 
} else { 
scrollParent = this.parents().filter(function() { 
return (/(auto|scroll)/).test($.curCSS(this,'overflow',1)+$.curCSS(this,'overflow-y',1)+$.curCSS(this,'overflow-x',1)); 
}).eq(0); 
} 
return (/fixed/).test(this.css('position')) || !scrollParent.length ? $(document) : scrollParent; 
} 
}); 

//Additional selectors 
$.extend($.expr[':'], { 
data: function(elem, i, match) { 
return !!$.data(elem, match[3]); 
}, 
focusable: function(element) { 
var nodeName = element.nodeName.toLowerCase(), 
tabIndex = $.attr(element, 'tabindex'); 
return (/input|select|textarea|button|object/.test(nodeName) 
? !element.disabled 
: 'a' == nodeName || 'area' == 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)['area' == nodeName ? 'parents' : 'closest'](':hidden').length; 
}, 
tabbable: function(element) { 
var tabIndex = $.attr(element, 'tabindex'); 
return (isNaN(tabIndex) || tabIndex >= 0) && $(element).is(':focusable'); 
} 
}); 

// $.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 == 'string' ? methods.split(/,?\s+/) : methods); 
} 
var methods = getMethods('getter'); 
if (args.length == 1 && typeof args[0] == 'string') { 
methods = methods.concat(getMethods('getterSetter')); 
} 
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 == 'string'), 
args = Array.prototype.slice.call(arguments, 1); 
// prevent calls to internal methods 
if (isMethodCall && options.substring(0, 1) == '_') { 
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 + '-' + name; 
this.options = $.extend({}, 
$.widget.defaults, 
$[namespace][name].defaults, 
$.metadata && $.metadata.get(element)[name], 
options); 
this.element = $(element) 
.bind('setData.' + name, function(event, key, value) { 
if (event.target == element) { 
return self._setData(key, value); 
} 
}) 
.bind('getData.' + name, function(event, key) { 
if (event.target == element) { 
return self._getData(key); 
} 
}) 
.bind('remove', 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 = 'option'; 
}; 
$.widget.prototype = { 
_init: function() {}, 
destroy: function() { 
this.element.removeData(this.widgetName) 
.removeClass(this.widgetBaseClass + '-disabled' + ' ' + this.namespace + '-state-disabled') 
.removeAttr('aria-disabled'); 
}, 
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 == 'disabled') { 
this.element 
[value ? 'addClass' : 'removeClass']( 
this.widgetBaseClass + '-disabled' + ' ' + 
this.namespace + '-state-disabled') 
.attr("aria-disabled", value); 
} 
}, 
enable: function() { 
this._setData('disabled', false); 
}, 
disable: function() { 
this._setData('disabled', 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'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('mousedown.'+this.widgetName, function(event) { 
return self._mouseDown(event); 
}) 
.bind('click.'+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('unselectable'); 
this.element.attr('unselectable', 'on'); 
} 
this.started = false; 
}, 
// TODO: make sure destroying one instance of mouse doesn't mess with 
// other instances of mouse 
_mouseDestroy: function() { 
this.element.unbind('.'+this.widgetName); 
// Restore text selection in IE 
($.browser.msie 
&& this.element.attr('unselectable', this._mouseUnselectable)); 
}, 
_mouseDown: function(event) { 
// don'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('mousemove.'+this.widgetName, this._mouseMoveDelegate) 
.bind('mouseup.'+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('mousemove.'+this.widgetName, this._mouseMoveDelegate) 
.unbind('mouseup.'+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's determine if the items are floating 
this.floating = this.items.length ? (/left|right/).test(this.items[0].item.css('float')) : false; 
//Let's determine the parent'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 == 'static') 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, 'sortable-item') == self) { 
currentItem = $(this); 
return false; 
} 
}); 
if($.data(event.target, 'sortable-item') == 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'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'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'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 'cursorAt' 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's not playing any role during the drag, won'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 ($('body').css("cursor")) this._storedCursor = $('body').css("cursor"); 
$('body').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 != 'HTML') 
this.overflowOffset = this.scrollParent.offset(); 
//Call callbacks 
this._trigger("start", event, this._uiHash()); 
//Recache the helper size 
if(!this._preserveHelperProportions) 
this._cacheHelperProportions(); 

//Post 'activate' 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 != 'HTML') { 
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+'px'; 
if(!this.options.axis || this.options.axis != "x") this.helper[0].style.top = this.position.top+'px'; 
//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 == 'semi-dynamic' ? !$.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('sort', 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 || 'id') || '').match(o.expression || (/(.+)[-=_](.+)/)); 
if(res) str.push((o.key || res[1]+'[]')+'='+(o.key && o.expression ? res[1] : res[2])); 
}); 
return str.join('&'); 
}, 
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 || 'id') || ''); }); 
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 ? 'width' : 'height'] > item[this.floating ? 'width' : 'height']) 
) { 
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], 'sortable'); 
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], 'sortable'); 
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('sortable-item', 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'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'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 'placeholder option, we don't force sizes - the class is responsible for that 
// 2. The option 'forcePlaceholderSize can be enabled to force it even if a class name is specified 
if(className && !o.forcePlaceholderSize) return; 
//If the element doesn'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('paddingTop')||0, 10) - parseInt(self.currentItem.css('paddingBottom')||0, 10)); }; 
if(!p.width()) { p.width(self.currentItem.innerWidth() - parseInt(self.currentItem.css('paddingLeft')||0, 10) - parseInt(self.currentItem.css('paddingRight')||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 ? 'left' : 'top']; 
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 ? 'left' : 'top']; 
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 == 'clone' ? this.currentItem.clone() : this.currentItem); 
if(!helper.parents('body').length) //Add the helper to the DOM if that didn't happen already 
$(o.appendTo != 'parent' ? 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 == '' || o.forceHelperSize) helper.width(this.currentItem.width()); 
if(helper[0].style.height == '' || 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'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'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 == 'absolute' && 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() == 'html' && $.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 == 'parent') o.containment = this.helper[0].parentNode; 
if(o.containment == 'document' || o.containment == 'window') this.containment = [ 
0 - this.offset.relative.left - this.offset.parent.left, 
0 - this.offset.relative.top - this.offset.parent.top, 
$(o.containment == 'document' ? document : window).width() - this.helperProportions.width - this.margins.left, 
($(o.containment == 'document' ? 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") != 'hidden'); 
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 == 'absolute' && !(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's offset without borders (offset + border) 
- ($.browser.safari && this.cssPosition == 'fixed' ? 0 : ( this.cssPosition == 'fixed' ? -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's offset without borders (offset + border) 
- ($.browser.safari && this.cssPosition == 'fixed' ? 0 : ( this.cssPosition == 'fixed' ? -this.scrollParent.scrollLeft() : scrollIsRootNode ? 0 : scroll.scrollLeft() ) * mod) 
) 
}; 
}, 
_generatePosition: function(event) { 
var o = this.options, scroll = this.cssPosition == 'absolute' && !(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 == 'relative' && !(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'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's offset without borders (offset + border) 
+ ($.browser.safari && this.cssPosition == 'fixed' ? 0 : ( this.cssPosition == 'fixed' ? -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's offset without borders (offset + border) 
+ ($.browser.safari && this.cssPosition == 'fixed' ? 0 : ( this.cssPosition == 'fixed' ? -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 == 'down' ? 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's higher after every append 
// 3. on the local scope, we copy the counter variable, and check in the timeout, if it'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'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] == 'auto' || this._storedCSS[i] == 'static') this._storedCSS[i] = ''; 
} 
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) $('body').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 == 'auto' ? '' : 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: 'auto', 
cursorAt: false, 
delay: 0, 
distance: 1, 
dropOnEmpty: true, 
forcePlaceholderSize: false, 
forceHelperSize: false, 
grid: false, 
handle: false, 
helper: "original", 
items: '> *', 
opacity: false, 
placeholder: false, 
revert: false, 
scroll: true, 
scrollSensitivity: 20, 
scrollSpeed: 20, 
scope: "default", 
tolerance: "intersect", 
zIndex: 1000 
} 
}); 
})(jQuery);
Javascript 相关文章推荐
jQeury淡入淡出需要注意的问题
Sep 08 Javascript
ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)
Jan 13 Javascript
javascript仿qq界面的折叠菜单实现代码
Dec 12 Javascript
JavaScript弹出对话框的三种方式
Mar 23 Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
Jul 27 Javascript
js当前页面登录注册框,固定div,底层阴影的实例代码
Oct 04 Javascript
最细致的vue.js基础语法 值得收藏!
Nov 03 Javascript
概述jQuery的元素筛选
Nov 23 Javascript
jQuery实现html table行Tr的复制、删除、计算功能
Jul 10 jQuery
Vue使用NProgress进度条的方法
Sep 21 Javascript
解决vue项目router切换太慢问题
Jul 19 Javascript
jquery实现简单自动轮播图效果
Jul 29 jQuery
自己用jQuery写了一个图片的马赛克消失效果
May 04 #Javascript
javascript实现2048游戏示例
May 04 #Javascript
Extjs 4.x 得到form CheckBox 复选框的值
May 04 #Javascript
jquery中的ajax方法怎样通过JSONP进行远程调用
May 04 #Javascript
动态创建script在IE中缓存js文件时导致编码的解决方法
May 04 #Javascript
将HTML的左右尖括号等转义成实体形式的两种实现方式
May 04 #Javascript
IE6-8中Date不支持toISOString的修复方法
May 04 #Javascript
You might like
单点登录 Ucenter示例分析
2013/10/29 PHP
YII2框架中使用yii.js实现的post请求
2017/04/09 PHP
php中上传文件的的解决方案
2018/09/25 PHP
php高清晰度无损图片压缩功能的实现代码
2018/12/09 PHP
PHP常见过waf webshell以及最简单的检测方法
2019/05/21 PHP
javascript 类定义的4种方法
2009/09/12 Javascript
niceTitle 基于jquery的超链接提示插件
2010/05/31 Javascript
js去除重复字符串两种实现方法
2013/01/09 Javascript
node.js中的events.emitter.once方法使用说明
2014/12/10 Javascript
node.js开机自启动脚本文件
2014/12/24 Javascript
JavaScript数据结构和算法之二叉树详解
2015/02/11 Javascript
元素绑定click点击事件方法
2015/06/08 Javascript
js实现全国省份城市级联下拉菜单效果代码
2015/09/07 Javascript
Javascript中浏览器窗口的基本操作总结
2016/08/18 Javascript
Bootstrap实现提示框和弹出框效果
2017/01/11 Javascript
微信小程序tabBar模板用法实例分析【附demo源码下载】
2017/11/28 Javascript
讲解vue-router之什么是动态路由
2018/05/28 Javascript
ionic4+angular7+cordova上传图片功能的实例代码
2019/06/19 Javascript
python实现支持目录FTP上传下载文件的方法
2015/06/03 Python
python os模块简单应用示例
2019/05/23 Python
Python列表元素常见操作简单示例
2019/10/25 Python
tensorflow求导和梯度计算实例
2020/01/23 Python
如何一键升级Python所有包
2020/11/05 Python
CSS实现限制字数功能当对象内文本溢出时显示省略标记
2014/08/20 HTML / CSS
应届生新闻编辑求职信
2013/11/19 职场文书
2014年元旦活动方案
2014/02/15 职场文书
党员“四风”方面存在问题及整改措施
2014/09/24 职场文书
2014年英语教研组工作总结
2014/12/06 职场文书
出纳岗位职责
2015/01/31 职场文书
考博导师推荐信范文
2015/03/27 职场文书
党员转正意见怎么写
2015/06/03 职场文书
鉴史问廉观后感
2015/06/10 职场文书
制定企业培训计划的五大要点!
2019/07/10 职场文书
Python答题卡识别并给出分数的实现代码
2021/06/22 Python
pytorch中的torch.nn.Conv2d()函数图文详解
2022/02/28 Python
利用Java连接Hadoop进行编程
2022/06/28 Java/Android