通过元素的上下移动虽然能够实现排序，但是不够灵活，比较僵硬，不能够快速达到我们想要排序的目的。下面我们讲解想如何实现快速的拖拽到自己想要的排序的位置。
首先我们要引入一款插件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效果如下图所示：
下面解释一下：此插件很简单很方便使用，当我们发现设置显示多少列和行距无效果时，不妨打开gridly.js源码，找到下面的方法，进行设置即可。
相关推荐：
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)_jquery
jquery拖拽排序简单实现方法(效果增强版)_jquery
以上是jQuery实现自由拖拽与排序元素的代码的详细内容。更多信息请关注PHP中文网其他相关文章！
