jquery list dragsort列表拖动插件使用方法
|
1 2 3 4 5 6 |
$("ul").dragsort({ dragSelector: "li", dragEnd: function() { }, dragBetween: false, placeHolderTemplate: "<li></li>" }); |
jquery list dragsort列表拖动插件参数说明
dragSelector
CSS选择器内的元素的列表项的拖动手柄。默认值是“li”。
dragSelectorExclude
CSS选择器的元素内的dragSelector不会触发dragsort的。默认值是”input, textarea, a[href]“。
dragEnd
拖动结束后将被调用的回调函数.
dragBetween
设置为“true”，如果你要启用多组列表之间拖动选定的列表。 默认值是false。
placeHolderTemplate
拖动列表的HTML部分。默认值是”<li></li>”.
scrollContainer
CSS选择器的元素，作为滚动容器，例如溢出的div设置为自动。 默认值是“窗口“.
scrollSpeed
一个数字，它代表了速度，页面拖动某一项时，将滚动容器外，较高使用价值的是速度和较低的值是较慢的。 如果设置为”0″以禁用滚动。默认值是”5″.
使用例子：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>基于jQuery的拖动排序插件|jsfoot 网页特效</title> <meta name="keywords" content="基于jQuery的拖动排序插件"> <meta name="description" content="jquery特效,js特效"> <script src="https://www.phpnote.cc/jquery.js"></script> <script type="text/javascript" src="https://www.phpnote.cc/jquery-list-dragsort.js"></script> <body> <!--演示内容开始--> <style type="text/css"> /* dragsort */ .dragsort-ver li{height:30px;line-height:30px; border:1px solid #DDD; margin:5px 0; padding:0 5px;} .dragsort{width:350px;list-style-type:none;margin:0px;} .dragsort li{float:left;padding:5px;width:100px;height:100px;} .dragsort div{width:90px;height:50px;border:solid 1px black;background-color:#E0E0E0;text-align:center;padding-top:40px;} .placeHolder div{background-color:white!important;border:dashed 1px gray!important;} </style> <section class="wrap" style="width:980px; padding:20px;"> <h1>jQuery列表拖动排列演示</h1> <h2>简单的一组列表:</h2> <ul data-listidx="0" class="dragsort-ver"> <li data-itemidx="0" style="cursor: pointer;">蔬菜</li> <li data-itemidx="1" style="cursor: pointer;">肉</li><li data-itemidx="2" style="cursor: move;">面包</li> <li data-itemidx="3" style="cursor: pointer;">牛奶</li> <li data-itemidx="4" style="cursor: pointer;">奶油</li> <li data-itemidx="5" style="cursor: pointer;">冰淇淋</li> </ul> <br> <script type="text/javascript"> $(".dragsort-ver").dragsort(); </script> <h2>两组列表拖放:</h2> <ul data-listidx="0" class="dragsort" id="list2" style="float:right;"> <li data-itemidx="0"><div style="cursor: pointer;">10</div></li> <li data-itemidx="1"><div style="cursor: pointer;">11</div></li> <li data-itemidx="2"><div style="cursor: pointer;">12</div></li> <li data-itemidx="3"><div style="cursor: pointer;">13</div></li> <li data-itemidx="4"><div style="cursor: pointer;">14</div></li> <li data-itemidx="5"><div style="cursor: pointer;">15</div></li> <li data-itemidx="6"><div style="cursor: pointer;">16</div></li> <li data-itemidx="7"><div style="cursor: pointer;">17</div></li> <li data-itemidx="8"><div style="cursor: pointer;">18</div></li> </ul> <ul data-listidx="1" class="dragsort" id="list1"> <li data-itemidx="0"><div style="cursor: pointer;">2</div></li> <li data-itemidx="1"><div style="cursor: pointer;">3</div></li><li style="" data-itemidx="2"><div style="cursor: pointer;">1</div></li> <li data-itemidx="3"><div style="cursor: pointer;">4</div></li> <li data-itemidx="4"><div style="cursor: pointer;">5</div></li> <li data-itemidx="5"><div style="cursor: pointer;">6</div></li> <li data-itemidx="6"><div style="cursor: pointer;">7</div></li> <li data-itemidx="7"><div style="cursor: pointer;">8</div></li> <li data-itemidx="8"><div style="cursor: pointer;">9</div></li> </ul> <!-- 排序保存在这里可以检索服务器上的回传 --> <input value="" name="list1SortOrder" type="hidden"> <script type="text/javascript"> $("#list1, #list2").dragsort({ dragSelector: "div", dragBetween: true, dragEnd: saveOrder, placeHolderTemplate: "<li class='placeHolder'><div></div></li>", scrollSpeed: 5 }); function saveOrder() { var data = $("#list1 li").map(function(){ return $(this).children().html(); }).get(); $("input[name=list1SortOrder]").val(data.join("|")); }; </script> <div style="clear:both;"></div> <!--演示内容结束--> </section> </body> </html> |
