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

 <!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>

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

　　2、效果如下。

　　示例下载：下载 。

dragsort html拖拽排序的更多相关文章

  1. php接口实现拖拽排序功能

    列表拖拽排序是一个很常见的功能,但是后端接口如何处理却是一个令人纠结的问题 如何实现才能达到效率最高呢 先分析一个场景,假如有一个页面有十条数据,所谓的拖拽就是在这十条数据来来回回的拖,但是每次拖动都 ...

  2. jQuery可拖拽排序列表jquery-sortable-lists

    jquery-sortable-lists可以通过鼠标进行拖动排列树型菜单,可以定义某个列表元素是否拖动,拖动后回调,点击可以折叠树型结点,可以用来在后台模仿wordpress后台拖动菜单,实现多级菜 ...

  3. 使用knockout-sortable实现对自定义菜单的拖拽排序

    在开始之前,照例,我们先看效果和功能实现. 关于自定义菜单的实现,这里就不多说了,需要了解的请访问:http://www.cnblogs.com/codelove/p/4838766.html 这里需 ...

  4. RecyclerView拖拽排序和滑动删除实现

    效果图 如何实现 那么是如何实现的呢?主要就要使用到ItemTouchHelper ,ItemTouchHelper 一个帮助开发人员处理拖拽和滑动删除的实现类,它能够让你非常容易实现侧滑删除.拖拽的 ...

  5. ztree使用系列四（ztree实现同级拖拽排序并将排序结果保存数据库）

    ztree这个系列的最后一篇,也是ztree功能强大的体现之中的一个--排序功能. ztree能够实现全部节点之间任意的拖拽排序功能.我这里依据须要实现了仅仅同意同级之间任意拖拽排序,事实上原理都一样 ...

  6. jquery sortTable拖拽排序

    所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象   ui.helper - 表示sortable元素的JQuery对象,通常是当前元素的克隆对象   ...

  7. ListView列表拖拽排序

    ListView列表拖拽排序能够參考Android源代码下的Music播放列表,他是能够拖拽的,源代码在[packages/apps/Music下的TouchInterceptor.java下]. 首 ...

  8. zTree的拖拽排序

    ztree本身是可以支持拖拽的,但是却没有找到明确的支持拖拽的排序,也就是说,在拖拽过程中,需要自定义维护拖拽后的顺序并保存至后台. 在这样一个比较常规的需求情况下,网上也有朋友给出了一些解决方案,比 ...

  9. RecyclerViewItemTouchHelperDemo【使用ItemTouchHelper进行拖拽排序功能】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 记录使用ItemTouchHelper对Recyclerview进行拖拽排序功能的实现. 效果图 代码分析 ItemTouchHel ...

随机推荐

  1. android 官方DrawerLayout的介绍和使用

    南尘:爱编程,爱安卓,每天进步一点点. drawerLayout是Support Library包中实现了侧滑菜单效果的控件,可以说drawerLayout是因为第三方控件如MenuDrawer等的出 ...

  2. 微信小程序探究

    前段时间比较流行的微信小程序,因为一直没有所谓内测码也没具体关注.拖到现在正好借组内分享的时机来仔细了解一下微信小程序.了解一个新的事物无外乎从是什么(本质),怎么用(具体用法),为什么用(优缺点)来 ...

  3. 4.Struts2转向类型详解

    struts2中提供了多种视图转向类型,类型由type属性指定,如: dispatcher:请求转发(默认值) redirect:重定向到页面 redirectAction:重定向到Action pl ...

  4. 在IIS7.5中ASP.NET调用cmd程序拒绝访问决绝方法小记

    前言 昨天利用Github的Webhook实现自动部署站点,其中要调用命令行(cmd.exe)程序执行shell脚本. 在本地测试没有任何问题,部署到服务器之后,发现错误信息:访问拒绝. 问题 没有权 ...

  5. C#集合--Dictionary

    字典(dictionary)是一个集合,其中每个元素都是一个键/值对.字典(Dictionaries)是常用于查找和排序的列表. .NET Framework通过IDictionary接口和IDict ...

  6. nodejs定义函数的方法

    test_163:/home/exenode/part3/module_exports # more calc.js module.exports = { sum:function() { var r ...

  7. yii的入口文件index.php中为什么会有这两句

    yii的应用模板中,index.php中 前面会有这两句 <?php // comment out the following two lines when deployed to produc ...

  8. Lind.DDD.Events事件总线～自动化注册

    回到目录 让大叔兴奋的自动化注册 对于领域事件之前说过,在程序启动时订阅(注册)一些事件处理程序,然后在程序的具体位置去发布(触发)它,这是传统的pub/sub模式的体现,当然也没有什么问题,为了让它 ...

  9. [Cordova] Plugin开发架构

    [Cordova] Plugin开发架构 问题情景 开发Cordova Plugin的时候,侦错Native Code是一件让人困扰的事情,因为Cordova所提供的错误讯息并没有那么的完整.常常需要 ...

  10. Apache Lucene(全文检索引擎)—搜索

    目录 返回目录:http://www.cnblogs.com/hanyinglong/p/5464604.html 本项目Demo已上传GitHub,欢迎大家fork下载学习:https://gith ...