你的位置:首页 > 网页设计

[网页设计]dragsort html拖拽排序


一、Jquery List DragSort
  对于有些页面,如首页的定制,需要进行动态的拖拽排序。由于自己实现比较困难,我们一般会使用一些js插件来实现。dragsort 就是帮助我们完成这一需求。通过dragsort我们可以很方便地对html页面上的素动态地推拽,进行排序。dragsort是一个jquery插件,我们使用起来非常方便。dragsort网站为:dragsort下载地址为:http://dragsort.codeplex.com/ 。
下载dragsort之后,解压如下图所示,

  

  我们使用到的只有里面的jquery.dragsort-0.5.2.js这个文件,也可以使用压缩版的min.js。
二、实例
  1、使用
  将jquery.dragsort-0.5.2.js,与jquery-2.1.3.min.js拷贝到同一个文件夹,新建html页面。引入这两个js文件。注意jquery在dragsort上面引入。相关代码如下:

 

 1 <!DOCTYPE html> 2 <html> 3 <head> 4   <title>拖拽示例</title> 5   <meta charset="utf-8" /> 6   <style type="text/css"> 7     body { font-family:Arial; font-size:12pt; padding:20px; width:820px; margin:20px auto; border:solid 1px black; } 8     h1 { font-size:16pt; } 9     h2 { font-size:13pt; } 10     ul { margin:0px; padding:0px; margin-left:20px; } 11     #list1, #list2 { width:350px; list-style-type:none; margin:0px; } 12     #list1 li, #list2 li { float:left; padding:5px; width:100px; height:100px; } 13     #list1 div, #list2 div { width:90px; height:50px; border:solid 1px black; background-color:#E0E0E0; text-align:center; padding-top:40px; } 14     #list2 { float:right; } 15     .placeHolder div { background-color:white !important; border:dashed 1px gray !important; } 16   </style> 17   <script type="text/javascript" src="jquery-2.1.3.min.js"></script> 18   <script type="text/javascript" src="jquery.dragsort-0.5.2.min.js"></script> 19 </head> 20 <body> 21    22   <h1>示例</h1>    23   <script type="text/javascript"> 24     $("ul:first").dragsort(); 25   </script> 26    27   <h2>可以在两个分组直接进行拖拽</h2> 28    29   <ul id="list2" class="draglist" data-groupid="gid-2"> 30     <li data-id="10" data-groupid="gid-2"><div>10</div></li> 31     <li data-id="11" data-groupid="gid-2"><div>11</div></li> 32     <li data-id="12" data-groupid="gid-2"><div>12</div></li> 33     <li data-id="13" data-groupid="gid-2"><div>13</div></li> 34     <li data-id="14" data-groupid="gid-2"><div>14</div></li> 35     <li data-id="15" data-groupid="gid-2"><div>15</div></li> 36     <li data-id="16" data-groupid="gid-2"><div>16</div></li> 37     <li data-id="17" data-groupid="gid-2"><div>17</div></li> 38     <li data-id="18" data-groupid="gid-2"><div>18</div></li> 39   </ul> 40   <input name="sortorder" id ="gid-2" type="hidden" value="10,11,12,13,14,15,16,17,18" /> 41    42   <ul id="list1" class="draglist" data-groupid="gid-1"> 43     <li data-id="1" data-groupid="gid-1"><div>1</div></li> 44     <li data-id="2" data-groupid="gid-1"><div>2</div></li> 45     <li data-id="3" data-groupid="gid-1"><div>3</div></li> 46     <li data-id="4" data-groupid="gid-1"><div>4</div></li> 47     <li data-id="5" data-groupid="gid-1"><div>5</div></li> 48     <li data-id="6" data-groupid="gid-1"><div>6</div></li> 49     <li data-id="7" data-groupid="gid-1"><div>7</div></li> 50     <li data-id="8" data-groupid="gid-1"><div>8</div></li> 51     <li data-id="9" data-groupid="gid-1"><div>9</div></li> 52   </ul> 53   <input name="sortorder" id ="gid-1" type="hidden" value="1,2,3,4,5,6,7,8,9"/> 54   <div style="clear:both;"></div> 55 <script type="text/javascript"> 56   $(".draglist").dragsort({ 57   dragSelector: "li", 58   dragBetween: true, 59   dragEnd: saveOrder, //拖拽完成后回调函数 60   placeHolderTemplate: "<li class='placeHolder'><div></div></li>" //拖动是阴影 61 }); 62  63 function saveOrder() { 64   var $this = $(this); 65   var data = $this.parent().children().map(function() { 66     return $this.attr("data-id"); 67   }).get(); 68  69   var currentid = $this.attr("data-id"); //组件id 70   var oldgroupid = $this.attr("data-groupid"); //所属组id 71   var groupid = $this.parent().attr("data-groupid"); //目标组id 72  73   //跨组移动、移除旧组信息 74   if (oldgroupid != groupid) { 75     var oldgroup = $("#" + oldgroupid); 76     var groupval = oldgroup.val().replace(currentid, ""); 77     oldgroup.val(groupval); 78   } 79  80   $("#" + groupid).val(data.join(",")); //添加所属组记录 81   $this.attr("data-groupid", groupid); //改变所属组id  82 }; 83  84 /** 85  * 保存位置 86 */ 87 function savePosition() { 88   var inputs = $("input[name='sortorder']"); 89   var arr = new Array(); 90   //构造数据 91   inputs.each(function() { 92     var $this = $(this); 93     arr.push($this.attr("id") + "-" + $this.val()); 94   }); 95    96   $.ajax({ 97     url: "${ctx}/test/position.json", 98     type: "POST", 99     data: { "tiles": arr },100     dataType: "json",101     success: function(data) {102       if (data.flag) 103         alert("保存成功");104       else105         alert("保存失败");106     }107   });108 } 109 </script> 110 </body>111 </html>

  其中两个input的值为li的id(以","连接),id值的顺序标识当前分组li的排列顺序。跨组拖动的时候两个input中的值会随之改变。从而达到跨组移动的效果。需要保存的时候,直接使用ajax将两个input的值进行提交,后台解析数据保存到数据库即可。

  2、效果如下。

  示例下载:下载 。