<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src='javascripts/jquery.js' type='text/javascript'></script>

    <script src='javascripts/jquery.gridly.js' type='text/javascript'></script>

</head>

<style type="text/css">

  #gridly

  {

    position: relative;

    width: 300px;

  }

  #gridly div{

    background: red;

    width: 60px;

    height: 60px;

  }

</style>

<body>

    <div id="gridly">

      <div user_id="1">1</div>

      <div user_id="2">2</div>

      <div user_id="3">3</div>

      <div user_id="4">4</div>

      <div user_id="5">5</div>

      <div user_id="6">6</div>

      <div user_id="7">7</div>

      <div user_id="8">8</div>

      <div user_id="9">9</div>

      <div user_id="10">10</div>

    </div>

    <script>

        //拖拽组件设置

        var gridly_set = {

        //reordering拖拽前回调函数，reordered拖拽后回调函数

        callbacks:{ reordering: reordering , reordered: reordered },

        //间距

        gutter:60,

        //显示列数

        columns:6

        };

        //加载拖拽组件

        $('#gridly').gridly(gridly_set);

        //拖拽前回调

        function reordering(){

        console.log('reordering');

        }

        //拖拽后回调

        function reordered(){

        console.log('reordered');

        //隔100ms 防止在拖拽放下那一瞬间 返回的left top不准确

        setTimeout(get_user_id_data,100);

        }

        //获取user_ids 并排序 且 ajax提交

        function get_user_id_data(){

        var dom = $('#gridly div');

        var tmp = {};

        // 列数的权重 必须保证此数字大于每行的最大宽度

        // 其实可以用columns*(gutter+base_width) 来计算 但鉴于columns不经常变 没必要这样写

        var col_base_num = 10000;

        dom.each(function(){

          var self = $(this);

          var left_num = self.css('left').replace(/px/,'');

          var top_num = self.css('top').replace(/px/,'');

          //加1 保证top大于0

          var top_tmp = parseInt(top_num) + 1;

          //权重 = left + (top+1)*col_base_num

          var weight = parseInt(left_num) + (top_tmp*col_base_num);

          var user_id = self.attr('user_id');

          tmp[weight] = user_id;

        });

        //利用对象本身对key的排序功能 实现排序

        var i;

        var arr = [];

        for(i in tmp){

          var r = tmp[i];

          arr.push(r);

        }

        //排序后的数组

        console.log(arr);

        }

    </script>

</body>

</html>

　

jquery 以及 jquery.gridly.js 放至相对目录

效果:

js 利用jquery.gridly.js实现拖拽并且排序的更多相关文章

  1. nw.js FrameLess Window下的窗口拖拽与窗口大小控制

    nw.js FrameLess Window下的窗口拖拽与窗口大小控制 很多时候,我们觉得系统的Frame框很难看,于是想自定义. 自定义Frame的第一步是在package.config文件中将fr ...

  2. jQuery Validate 表单验证插件----利用jquery.metadata.js将校验规则直接写在class属性里面并定义错误信息的提示

    一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二. 添加一个另外一个插件jquery.metadata.js 并把校验规则写在控件里面 ...

  3. 利用jquery.touchSwipe.js实现的移动滑屏效果。

    利用jquery.touchSwipe.js实现的移动滑屏效果. 亲测:兼容ie8及各种浏览器 <script type="text/javascript" src=&quo ...

  4. 利用jquery.form.js实现将form提交转为ajax方式提交的方法（带上传的表单提交）

    提供一种方法就是利用jquery.form.js. (1)这个框架集合form提交.验证.上传的功能. 核心方法 -- ajaxForm() 和 ajaxSubmit() $('#myForm').a ...

  5. 两种图片延迟加载的方法总结jquery.scrollLoading.js与jquery.lazyload.js

    估计网上能查到的最多的两种图片延迟加载方法就是jquery.scrollLoading.js与jquery.lazyload.js了,其中jquery.lazyload.js的调用方法因为有网友爆出的 ...

  6. VUE +element el-table运用sortable 拖拽table排序，实现行排序，列排序

    Sortable.js是一款轻量级的拖放排序列表的js插件(虽然体积小,但是功能很强大) 项目需求是要求能对element中 的table进行拖拽行排序 这里用到了sorttable Sortable ...

  7. 利用插件（jQuery-ui.js）实现表格行的拖拽排序

    template 模板(html) 首先要引入jQuery-ui.js的文件.import './../../scripts/base/jquery/jquery-ui.min.js';<tab ...

  8. 原生JS实现弹出窗口的拖拽

    上一篇说了一下弹出窗口功能的实现思路,一般情况下紧接着就会需要做到弹窗的移动,当然现在有很插件.库比如hammer可以使用,效率也非常好.但我觉得还是有必要了解一下原生JS的实现思路及方式,如下: 思 ...

  9. Hammer.js 实现移动端元素的拖拽库

    1. Pan事件:在指定的dom区域内,一个手指放下并移动事件,即触屏中的拖动事件.这个事件在屏触开发中比较常用,如:左拖动.右拖动等,如手要上使用QQ时向右滑动出现功能菜单的效果.该事件还可以分别对 ...

随机推荐

  1. 软件测试之adb命令-实际公司使用场景--今日log

    软件测试之adb命令-实际公司使用场景--今日log Dotest-董浩整理 1)可以看内存泄漏: 2)可以安装.卸载app--截图并提交bug: 3)可以通过抓app日志定位问题: 4)可以结合mo ...

  2. 第八节，Opencv的基本使用------存取图像、视频功能、简单信息标注工具

    1.存取图像 import cv2 img=cv2.imread('test.jpg') cv2.imwrite('test1.jpg',img) 2.图像的仿射变换 图像的仿射变换涉及图像的形状位置 ...

  3. Windows下ToroiseSVN基本使用&&在Visual studio中使用SVN

    首先在 https://tortoisesvn.net/downloads.html 下载svn客户端 下载并安装好之后再开始菜单会出现如下图标: 现在可以开始使用TortoiseSVN了,选择一个本 ...

  4. flume taidir to kafkasink

    flume的数据源采用taiDir,sink类型选择kafka类型 测试目标:flume监控某一个目录的日志文件,并将文件存储到kafka中,在kafka的消费端可以实现数据的消费 dip005.di ...

  5. niagara Workbench module import IntelliJ

    1. 在整个网络布线中使用一种布线方式,但是两端都有RJ-45 plug  的网络连线,无论是采用方式A还是方式B 端接的方式都是试用的.网络都是通用的,双绞线的顺序与RJ-45偶的引脚序号一一对应, ...

  6. python-argparse使用

    官方文档:https://docs.python.org/zh-cn/3.7/library/argparse.html?highlight=argparse#module-argparse argp ...

  7. appJSON["window"]["navigationBarTextStyle"] 字段需为 black 或 white

    appJSON["window"]["navigationBarTextStyle"] 字段需为 black 或 white     改动成这个就可以了 &qu ...

  8. Linux安装与基本命令

    安装centos镜像 #下载地址https://www.centos.org/download/ http://isoredirect.centos.org/centos/7/isos/x86_64/ ...

  9. C# .Net String字符串效率提高-字符串拼接

    字符串操作是编程中非常频繁的操作,特别是在拼接字符串的时候.下面来说说字符串拼接的效率提升. 1. 减少装箱 值类型与引用类型之间的转换存在装箱与拆箱操作:将值类型转换成引用类型的操作叫装箱,将引用类 ...

  10. Kali linux2.0里Metasploit的postgresql selected, no connection问题解决

    说在前面的话 1.在kali中metasploit默认使用postgresql作为它的数据库: 想要开启metasploit服务首先得打开postgresql数据库, 命令如下:(或者:/etc/in ...