欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

*拖拽元素,实现*排序

程序员文章站 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
作者:漠北桑海