Heim > Web-Frontend > HTML-Tutorial > dragsort html拖拽排序_html/css_WEB-ITnose

dragsort html拖拽排序_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:28:17
Original
1483 Leute haben es durchsucht

一、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>
Nach dem Login kopieren

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

  2、效果如下。

  示例下载:下载 。

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage