dragsort html拖拽排序

時間 2019-11-06

標籤 dragsort html 排序欄目 HTML 简体版

原文原文鏈接

1、Jquery List DragSort
　　對於有些頁面，如首頁的定製，須要進行動態的拖拽排序。因爲本身實現比較困難，咱們通常會使用一些js插件來實現。dragsort 就是幫助咱們完成這一需求。經過dragsort咱們能夠很方便地對html頁面上的素動態地推拽，進行排序。dragsort是一個jquery插件，咱們使用起來很是方便。dragsort網站爲：dragsort下載地址爲：http://dragsort.codeplex.com/ 。
下載dragsort以後，解壓以下圖所示，javascript

　　咱們使用到的只有裏面的jquery.dragsort-0.5.2.js這個文件，也能夠使用壓縮版的min.js。
2、實例
　　一、使用
　　將jquery.dragsort-0.5.2.js，與jquery-2.1.3.min.js拷貝到同一個文件夾，新建html頁面。引入這兩個js文件。注意jquery在dragsort上面引入。相關代碼以下：css

  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             else
105                 alert("保存失敗");
106         }
107     });
108 } 
109 </script> 
110 </body>
111 </html>

　　其中兩個input的值爲li的id（以","鏈接），id值的順序標識當前分組li的排列順序。跨組拖動的時候兩個input中的值會隨之改變。從而達到跨組移動的效果。須要保存的時候，直接使用ajax將兩個input的值進行提交，後臺解析數據保存到數據庫便可。html

　　二、效果以下。
java

　　示例下載：下載。
jquery

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。