*拖拽元素,实现*排序
程序员文章站
2022-05-03 09:34:29
上一期我们用jquery实现了通过元素的上下移动进行的排序,但是我们发现上下移动,虽然能够实现排序,但是不够灵活,比较僵硬,不能够快速达到我们想要排序的目的。下面我们讲解想如何实现快速的拖拽到自己想要的排序的位置。 首先我们要引入一款插件gridly.js,用来实现元素拖拽。 以下简单的几行js代码 ......
上一期我们用jquery实现了通过元素的上下移动进行的排序,但是我们发现上下移动,虽然能够实现排序,但是不够灵活,比较僵硬,不能够快速达到我们想要排序的目的。下面我们讲解想如何实现快速的拖拽到自己想要的排序的位置。
首先我们要引入一款插件gridly.js,用来实现元素拖拽。
<script src="js/jquery.min.js" type="text/javascript"></script> <script src="js/jquery.gridly.js" type="text/javascript"></script> <link href="css/jquery.gridly.css" rel="stylesheet" type="text/css" /> <style> .gred { width: 90px; height: 100px; background: red; font-size:20px; text-align: center; } .ccc { width: 90px; height: 100px; background: #ccc; text-align: center; font-size:20px; } .gridly{ position: relative; width: 800px; height: 200px; overflow: auto; } </style> <div class="gridly"></div>
以下简单的几行js代码就能实现我们想要的功能:
(function(){ var dom=''; for (var i = 0; i <= 10; i++) { if(i%2!=0){ dom+='<div class=" gred">'+i+'</div>'; }else{ dom+='<div class=" ccc">'+i+'</div>'; } } $($('.gridly')[0]).append(dom); //添加排序元素 var reordering = function($elements) { }; var reordered = function($elements) { var arrdom=$elements; var array=[]; //接取排序之后的数据 $.each(arrdom,function(i,t){ array.push($(t).html()); }); console.log(array); }; $('.gridly').gridly({ callbacks: { reordering: reordering, reordered: reordered } }); //设置元素块的显示方式 $('.gridly').gridly({ base: 100, // 子元素宽度px gutter: 20, // 间距px columns: 7 //7列 }); })();
效果如下图所示:
下面解释一下:此插件很简单很方便使用,当我们发现设置显示多少列和行距无效果时,不妨打开gridly.js源码,找到下面的方法,进行设置即可。
下载地址:https://files.cnblogs.com/files/mobeisanghai/jquery.gridly.rar
本期讲解就到这里, 本文为作者原创,如有转载请标明文章出处:
https://www.cnblogs.com/mobeisanghai/p/9322145.html
作者:漠北桑海
上一篇: 移动端触摸滑动插件Swiper使用指南
推荐阅读
-
html5指南-3.如何实现html元素拖拽功能_html5教程技巧
-
jQuery使用drag效果实现*拖拽div_jquery
-
iOS实现一个可以在屏幕中*移动的按钮
-
asp.net中使用 Repeater控件拖拽实现排序并同步数据库字段排序
-
android的RecyclerView实现拖拽排序和侧滑删除示例
-
Android recyclerview实现拖拽排序和侧滑删除
-
iOS实现一个可以在屏幕中*移动的按钮
-
android的RecyclerView实现拖拽排序和侧滑删除示例
-
asp.net中使用 Repeater控件拖拽实现排序并同步数据库字段排序
-
Android recyclerview实现拖拽排序和侧滑删除