一、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. jQuery可拖拽排序列表jquery-sortable-lists

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

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

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

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

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

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

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

  5. jquery sortTable拖拽排序

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

  6. ListView列表拖拽排序

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

  7. zTree的拖拽排序

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

  8. ListBox实现拖拽排序功能

    1.拖拽需要实现的事件包括: PreviewMouseLeftButtonDown LBoxSort_OnDrop 具体实现如下: private void LBoxSort_OnPreviewMou ...

  9. 关于jqueryUI里的拖拽排序

    主要参考http://jsfiddle.net/KyleMit/Geupm/2/  (这个站需要FQ才能看到效果) 其实是jqueryUI官方购物车拖拽添加例子的增强版,就是在拖拽的时候增加了排序 这 ...

随机推荐

  1. 【前端积累】SEO 学习

    白帽SEO:网站标题  关键字  描述   网站内容优化   Robot.txt文件   网站地图   增加外链引用 网站结构布局优化:扁平化结构 控制首页链接数量:中小网站100以内,页面导航.底部 ...

  2. live555+ffmpeg如何提取关键帧(I帧,P帧,B帧)

    live555+ffmpeg如何提取关键帧(I帧,P帧,B帧)开发流媒体播放器的时候,特别是在windows  mobile,symbian(S60)平台开发时,很可能遇到需要自己开发播放器的情况.S ...

  3. 图片缩放应用(nearest / bilinear / three-order interpolate)

    typedef xPixel PIXELCOLORRGB; double Sinxx(double value){ if (value < 0) value = -value; if (valu ...

  4. 学习OpenCV——Surf(特征点篇)&amp;flann

    Surf(Speed Up Robust Feature) Surf算法的原理                                                             ...

  5. 快速升级php5.6

    !!yum list installed | grep phpcd /etc/yum.repos.drpm -Uvh https://mirror.webtatic.com/yum/el6/lates ...

  6. 【微信开发之问题集锦】redirect_uri 参数错误

    问题答案:看看网页授权域名是不是以"http://",是则去掉.(如果网页授权域名都没修改,那就去修改吧,要注意域名不要带"http://"."htt ...

  7. opencv之深拷贝及浅拷贝,IplImage装换为Mat

    一.(1)  浅拷贝: Mat B; B = image  // 第一种方式 Mat C(image); // 第二种方式 这两种方式称为浅copy,是由于它们有不同的矩阵头,但是它们共享内存空间,即 ...

  8. NoSQL你知多少?

    1.NoSQL是什么? NoSQL 是 Not Only SQL 的缩写,意即"不仅仅是SQL"的意思,泛指非关系型的数据库.强调Key-Value Stores和文档数据库的优点 ...

  9. iOS程序进入后台后仍运行定时器NSTimer

    由于本应用需要在应用进入后台后还要进行定时的检测功能,因此对于我来说怎样让APP在进入后台后 保持运行状态是比较大的需求.然后在iOS系统中是很难实现的,不管是 通过 音频还是 定位系统,我查找了一些 ...

  10. 【Nginx 3】FTP远程文件下载

    导读:在做项目的过程中,当用户发起申诉时,要上传一个申诉材料.然后后台运营人员在处理申诉时,可能会需要下载申诉材料,进行参考.本篇博客呢,就介绍一下文件的下载! 一.代码实现 <span sty ...