jquery列表拖动排列(由项目提取相当好用)
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>最好的jquery列表拖动排列自定义拖动层排列</title>
<metaname="description"content="jquery列表模块拖动层，当点击或拖动列表时，可以自定义随意拖放列表模块到相应位置。支持回调函数的拖动层。"/>
<scripttype="text/javascript"src="js/jquery-1.4.2.min.js"></script>
<scripttype="text/javascript"src="js/jquery.dragsort-0.4.min.js"></script>
<styletype="text/css">
*{margin:0;padding:0;list-style-type:none;}
body{font-family:Arial;font-size:12pt;color:#333;}
h1{font-size:16pt;}
h2{font-size:13pt;}
/*demo*/
.demo{padding:20px;width:800px;margin:20pxauto;border:solid1pxblack;}
.demoh2{margin:30px020px0;color:#3366cc;}
/*dragfunction*/
.dragfunction{margin:40px000;}
.dragfunctiondt{height:30px;font-weight:800;}
.dragfunctiondd{line-height:22px;padding:0020px0;color:#5e5e5e;}
/*dragsort*/
.dragsort-verli{height:30px;line-height:30px;}
.dragsort{width:350px;list-style-type:none;margin:0px;}
.dragsortli{float:left;padding:5px;width:100px;height:100px;}
.dragsortdiv{width:90px;height:50px;border:solid1pxblack;background-color:#E0E0E0;text-align:center;padding-top:40px;}
.placeHolderdiv{background-color:white!important;border:dashed1pxgray!important;}
</style>
</head>
<body>
<div>
<h1>jQuery列表拖动排列演示</h1>
<h2>简单的一组列表:</h2>
<ul>
<li>你猜</li>
<li>你不猜</li>
<li>你不猜你不猜</li>
<li><inputtype="checkbox"name="intro_fields[]"value="猜猜"/>猜猜</li>
<li>你猜不猜</li>
<li>你猜不猜不猜</li>
<li>你不猜不猜</li>
</ul>
<br/>
<scripttype="text/javascript">
$("ul:first").dragsort();
</script>
<h2>两组列表拖放:(无限组拖放)</h2>
<ulid="list2"style="float:right;">
<li><div>10</div></li>
<li><div>11</div></li>
<li><div>12</div></li>
<li><div>13</div></li>
<li><div>14</div></li>
<li><div>15</div></li>
<li><div>16</div></li>
<li><div>17</div></li>
<li><div>18</div></li>
</ul>
<ulid="list1">
<li><div>1</div></li>
<li><div>2</div></li>
<li><div>3</div></li>
<li><div>4</div></li>
<li><div>5</div></li>
<li><div>6</div></li>
<li><div>7</div></li>
<li><div>8</div></li>
<li><div>9</div></li>
</ul>
<!--排序保存在这里可以检索服务器上的回传-->
<inputname="list1SortOrder"type="hidden"/>
<scripttype="text/javascript">
$("#list1,#list2").dragsort({
dragSelector:"div",
dragBetween:true,
dragEnd:saveOrder,
placeHolderTemplate:"<liclass='placeHolder'><div></div></li>",
scrollSpeed:5
});
functionsaveOrder(){
vardata=$("#list1li").map(function(){
return
$(this).children().html();
}).get();
$("input[name=list1SortOrder]").val(data.join("|"));
};
</script>
<divstyle="clear:both;"></div>
<h2>Usage</h2>
$("ul").dragsort({dragSelector:"li",dragEnd:function(){},dragBetween:false,placeHolderTemplate:"<li></li>"});<br/>
<br/>
<dl>
<dt>dragSelector</dt>
<dd>CSS选择器内的元素的列表项的拖动手柄。默认值是“li”。</dd>
<dt>dragSelectorExclude</dt>
<dd>CSS选择器的元素内的dragSelector不会触发dragsort的。默认值是"input,textarea,a[href]"。</dd>
<dt>dragEnd</dt>
<dd>拖动结束后将被调用的回调函数.</dd>
<dt>dragBetween</dt>
<dd>设置为“true”，如果你要启用多组列表之间拖动选定的列表。默认值是false。</dd>
<dt>placeHolderTemplate</dt>
<dd>拖动列表的HTML部分。默认值是"<li></li>".</dd>
<dt>scrollContainer</dt>
<dd>CSS选择器的元素，作为滚动容器，例如溢出的div设置为自动。默认值是“窗口“.</dd>
<dt>scrollSpeed</dt>
<dd>一个数字，它代表了速度，页面拖动某一项时，将滚动容器外，较高使用价值的是速度和较低的值是较慢的。如果设置为"0"以禁用滚动。默认值是"5".</dd>
</dl>
</div>
</body>
</html>
代码2预览:
<!DOCTYPEhtml>
<html>
<head>
<title>jQueryUIsortable()实现拖动排序</title>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<scriptsrc="http://tool.phpddt.com/resources/js/jquery-1.7.2.min.js"></script>
<scriptsrc="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>
<body>
<script>
$(function(){
$(".sortable").sortable({
cursor:"move",
items:"li",//只是li可以拖动
opacity:0.6,//拖动时，透明度为0.6
revert:true,//释放时，增加动画
update:function(event,ui){//更新排序之后
alert($(this).sortable("toArray"));
}
});
});
</script>
<ul>
<liid="1">第1项</li>
<liid="2">第2项</li>
<liid="3">第3项</li>
</ul>
</body>
</html>
源码下载