jQuery列表拖动排列具体实现

实现这个很简单第一，导入JS，jquery.dragsort.js，jquery.dragsort-0.4.min.js，jquery-1.4.2.min.js。第二，代码复制代码代码如下： h2两组列表拖放：/H2 ul class='拖动排序' id='列表2 ' style='向右浮动：'Li div 10/div/Li Li div 11/div/Li Li div 12/div/Li Li div 13/div/Li Li Li div 14/div/Li Li Li div 15/div/Li Li Li div 16/div/Li Li Li div 17/div/Li Li Li Li div 18/div/Li/Li/ul class=' drag sort ' id=' list 1 ' v1/div/Li v2/div/Li v3/div/Li v4/div/Li V5/div/Li V6/div/Li V6/div/Li V6/排序保存在这里可以检索服务器上的回传-输入名称=' list1SortOrder '类型='隐藏'/脚本类型='text/javascript' $('#list1，#list2 ').拖动排序({拖动选择器： ' div '，拖动介于： true之间，拖动： saveOrder，占位符模板： ' Li class=' placeHolder ' div/div/Li '，滚动速度： 5 })；函数save order(){ var data=$(' # list 1 Li ').map(function(){ return $(this)).儿童()。html()；}).get()；$(“input[name=listsorder]”).val(数据。join(' | ')；};/script三，样式复制代码代码如下：样式类型=' text/CSS ' * { margin :0；划水：0;列表样式-:型无；} body { font-family : arialfont-size :12 ptcolor : # 333 } h1 { font-size :16 pt；} H2 { font-size :13 pt；} /*演示*/。演示{ padding:20px宽度宽度：800像素336020像素汽车；border:solid 1px黑色；} .演示H2 { margin :30 px 0 20px 0 color : # 3366 cc }/* drag function */.拖动函数{ margin :40 px 0 0} .拖动函数dt { height :30 px字体粗细：800；} .拖动函数DD {行高：22 pxpadd :0 0 20px 0 color : # 5e5e 5e }/* drag sort */.拖动分类器李；线高：30 px} .dragsort { width:350px列表样式-:型无；margin:0px}。drag sort Li { float : leftadding :5 px宽度宽度：100像素高度：100 px} .dragsort div { width:90px高度：50 pxborder:solid 1px黑色；背景色-颜色： # E0E 0；文本对齐：居中；衬垫-顶部：40像素；} .placeHolder div {背景-颜色：白色！重要；border:dashed禁用灰色1px灰色！重要；}/样式四，解释拖动选择器半铸钢钢性铸铁(Cast Semi-Steel)选择器内的元素的列表项的拖动手柄。默认值是李。dragSelectorExclude CSS选择器的元素内的拖动选择器不会触发dragsort的。默认值是输入，文本区，a[href]'。dragEnd拖动结束后将被调用的回调函数dragBetween .设置为"真",如果你要启用多组列表之间拖动选定的列表。默认值是假的。placeHolderTemplate模板模板拖动列表的超文本标记语言部分。默认值是李/李.滚动容器半铸钢钢性铸铁(Cast Semi-Steel)选择器的元素，作为滚动容器，例如溢出的差异设置为自动。默认值是"窗口".滚动速度一个数字，它代表了速度，页面拖动某一项时，将滚动容器外，较高使用价值的是速度和较低的值是较慢的。如果设置为'0'以禁用滚动。默认值是'5'.