当前位置:Gxlcms > JavaScript > jQuery实现自由拖拽与排序元素的代码

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

时间:2021-07-01 10:21:17 帮助过:21人阅读

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

首先我们要引入一款插件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实现自由拖拽与排序元素的代码的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行