dragsort html拖拽排序

家明 2023-11-30 0 0

一、Jquery List DragSort

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

下载dragsort之后，解压如下图所示，

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上面引入。相关代码如下：

<!DOCTYPE html>
<html>
<head>
 <title>拖拽示例</title>
 <meta charset="utf-8" />
 <style type="text/css">
  body { font-family:Arial; font-size:12pt; padding:20px; width:820px; margin:20px auto; border:solid 1px black; }
  h1 { font-size:16pt; }
  h2 { font-size:13pt; }
  ul { margin:0px; padding:0px; margin-left:20px; }
  #list1, #list2 { width:350px; list-style-type:none; margin:0px; }
  #list1 li, #list2 li { float:left; padding:5px; width:100px; height:100px; }
  #list1 div, #list2 div { width:90px; height:50px; border:solid 1px black; background-color:#E0E0E0; text-align:center; padding-top:40px; }
  #list2 { float:right; }
  .placeHolder div { background-color:white !important; border:dashed 1px gray !important; }
 </style>
 <script type="text/javascript" src="jquery-2.1.3.min.js"></script>
 <script type="text/javascript" src="jquery.dragsort-0.5.2.min.js"></script>
</head>
<body>
 <h1>示例</h1>  
 <script type="text/javascript">
  $("ul:first").dragsort();
 </script>
 <h2>可以在两个分组直接进行拖拽</h2>
 <ul id="list2" class="draglist"  data-groupid="gid-2">
  <li data-id="10" data-groupid="gid-2"><div>10</div></li>
  <li data-id="11" data-groupid="gid-2"><div>11</div></li>
  <li data-id="12" data-groupid="gid-2"><div>12</div></li>
  <li data-id="13" data-groupid="gid-2"><div>13</div></li>
  <li data-id="14" data-groupid="gid-2"><div>14</div></li>
  <li data-id="15" data-groupid="gid-2"><div>15</div></li>
  <li data-id="16" data-groupid="gid-2"><div>16</div></li>
  <li data-id="17" data-groupid="gid-2"><div>17</div></li>
  <li data-id="18" data-groupid="gid-2"><div>18</div></li>
 </ul>
 <input name="sortorder" id ="gid-2" type="hidden" value="10,11,12,13,14,15,16,17,18" />
 <ul id="list1" class="draglist" data-groupid="gid-1">
  <li data-id="1" data-groupid="gid-1"><div>1</div></li>
  <li data-id="2" data-groupid="gid-1"><div>2</div></li>
  <li data-id="3" data-groupid="gid-1"><div>3</div></li>
  <li data-id="4" data-groupid="gid-1"><div>4</div></li>
  <li data-id="5" data-groupid="gid-1"><div>5</div></li>
  <li data-id="6" data-groupid="gid-1"><div>6</div></li>
  <li data-id="7" data-groupid="gid-1"><div>7</div></li>
  <li data-id="8" data-groupid="gid-1"><div>8</div></li>
  <li data-id="9" data-groupid="gid-1"><div>9</div></li>
 </ul>
 <input name="sortorder" id ="gid-1" type="hidden" value="1,2,3,4,5,6,7,8,9"/>
 <div style="clear:both;"></div>
<script type="text/javascript">
 $(".draglist").dragsort({
 dragSelector: "li",
 dragBetween: true,
 dragEnd: saveOrder, //拖拽完成后回调函数
 placeHolderTemplate: "<li class='placeHolder'><div></div></li>" //拖动是阴影
});
function saveOrder() {
 var $this = $(this);
 var data = $this.parent().children().map(function() {
  return $this.attr("data-id");
 }).get();
 var currentid = $this.attr("data-id"); //组件id
 var oldgroupid = $this.attr("data-groupid"); //所属组id
 var groupid = $this.parent().attr("data-groupid"); //目标组id
 //跨组移动、移除旧组信息
 if (oldgroupid != groupid) {
  var oldgroup = $("#" + oldgroupid);
  var groupval = oldgroup.val().replace(currentid, "");
  oldgroup.val(groupval);
 }
 $("#" + groupid).val(data.join(",")); //添加所属组记录
 $this.attr("data-groupid", groupid); //改变所属组id  
};

/**
 * 保存位置
 */
function savePosition() {
    var inputs = $("input[name='sortorder']");
    var arr = new Array();
    //构造数据
    inputs.each(function() {
        var $this = $(this);
        arr.push($this.attr("id") + "-" + $this.val());
    });
    
    $.ajax({
        url: "${ctx}/test/position.json",
        type: "POST",
        data: { "tiles": arr },
        dataType: "json",
        success: function(data) {
            if (data.flag)  
             alert("保存成功");
            else
             alert("保存失败");
        }
    });
} 
</script> 
</body>
</html>