ドラッグソート html ドラッグ sort_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ドラッグソート html ドラッグ sort_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:28:17

オリジナル

1480 人が閲覧しました

1. Jquery List DragSort
ホームページのカスタマイズなど、一部のページでは、動的なドラッグアンドドロップの並べ替えが必要です。自分で実装するのは難しいため、通常はいくつかのjsプラグインを使用して実装します。ドラッグソートは、このニーズを達成するのに役立ちます。ドラッグソートを使用すると、HTML ページ上の要素を簡単に動的にドラッグして並べ替えることができます。ドラッグソートは jquery プラグインであり、非常に便利です。ドラッグソートの Web サイトは次のとおりです。ドラッグソートのダウンロードアドレスは、http://dragsort.codeplex.com/ です。
ドラッグソートをダウンロードしたら、下図のように解凍してください。

内部にある jquery.dragsort-0.5.2.js ファイルのみを使用します。min.js の圧縮バージョンを使用することもできます。
2. 例
1.
を使用して、jquery.dragsort-0.5.2.js と jquery-2.1.3.min.js を同じフォルダーにコピーし、新しい HTML ページを作成します。これら 2 つの js ファイルをインポートします。 jquery がドラッグソートの上に導入されたことに注意してください。関連するコードは次のとおりです:

  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>

ログイン後にコピー

2 つの入力の値は li の ID (「,」で接続) であり、ID 値の順序は現在の順序を識別します。グループ李。グループ間をドラッグすると、2 つの入力の値がそれに応じて変化します。これにより、グループ間の移動の効果が得られます。保存する必要がある場合は、ajax を直接使用して 2 つの入力の値を送信し、バックグラウンドでデータを解析してデータベースに保存します。

2. 効果は以下の通りです。

サンプルダウンロード: ダウンロード。