jQuery实现自由拖拽与排序元素的代码

来源：懂视网责编：小采时间：2020-11-27 19:33:29

jQuery实现自由拖拽与排序元素的代码

jQuery实现自由拖拽与排序元素的代码:通过元素的上下移动虽然能够实现排序，但是不够灵活，比较僵硬，不能够快速达到我们想要排序的目的。下面我们讲解想如何实现快速的拖拽到自己想要的排序的位置。首先我们要引入一款插件gridly.js，用来实现元素拖拽。 <script src="js/jq

推荐度：

点击下载本文 文档为doc格式

导读jQuery实现自由拖拽与排序元素的代码:通过元素的上下移动虽然能够实现排序，但是不够灵活，比较僵硬，不能够快速达到我们想要排序的目的。下面我们讲解想如何实现快速的拖拽到自己想要的排序的位置。首先我们要引入一款插件gridly.js，用来实现元素拖拽。 <script src="js/jq

通过元素的上下移动虽然能够实现排序，但是不够灵活，比较僵硬，不能够快速达到我们想要排序的目的。下面我们讲解想如何实现快速的拖拽到自己想要的排序的位置。

首先我们要引入一款插件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>
<p class="gridly"></p>

　以下简单的几行js代码就能实现我们想要的功能：

 ( dom='' ( i = 0; i <= 10; i++(i%2!=0+='<p class=" gred">'+i+'</p>'+='<p class=" ccc">'+i+'</p>''.gridly')[0]).append(dom); 
 reordering = reordered = arrdom= array=[]; 
 $.each(arrdom,'.gridly'
 $('.gridly'100, 
 gutter: 20, 
 columns: 7

效果如下图所示：