<!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. mysl 常用函数 union all if ifnull exists case when

    1.union all UNION 操作符用于合并两个或多个 SELECT 语句的结果集.请注意,UNION 内部的 SELECT 语句必须拥有相同数量的列.列也必须拥有相似的数据类型.同时,每条 S ...

  2. AngularJS初识

     AngularJS 简介 AngularJS是一个javaScript框架,是一个用JavaScript编写的库,通过指令扩展了HTML,且通过表达式绑定数据到HTML中. AngularJS使开发 ...

  3. 11、Grafana 5.0 新功能特性(译文)

      Grafana v5.0的新功能 这是Grafana有史以来最重大的更新. 本文将详细介绍主要的新功能和增强功能. New Dashboard Layout Engine enables a mu ...

  4. 等待activity出现(android特有的wait_activity)

    前言 在启动app的时候,如果直接做下一步点击操作,经常会报错,于是我们会在启动完成的时候加sleep.那么问题来了,这个sleep时间到底设置多少合适呢?设置长了,就浪费时间,设置短了,就会找不到元 ...

  5. HBase2.0.5 WordCount

    待计算的wordCount文件放在HDFS上. wc.txt: hive hadoop hello hello world hbase hive 目标:进行WordCount计算,把结果输出到HBas ...

  6. Invalid tld file: "/WEB-INF/tags/xxxt.tld", see JSP 2.2 specification section 7.3.1 for more details

    错误描述 在jsp页面引入了自定义的TLD文件的时候,碰到了一个错误 Invalid tld file: "/WEB-INF/tags/xxxt.tld", see JSP 2.2 ...

  7. 全文搜索引擎Elasticsearch入门实践

    全文搜索引擎Elasticsearch入门实践 感谢阮一峰的网络日志全文搜索引擎 Elasticsearch 入门教程 安装 首先需要依赖Java环境.Elasticsearch官网https://w ...

  8. springmvc映射html文件以及解决乱码问题

    <servlet-mapping> <servlet-name>jsp</servlet-name> <url-pattern>*.html</u ...

  9. 将cookie 转换成字典格式

    b = 'bid=Qzw9cKnyESM; ll="108288"; __yadk_uid=4YChvgeANLBEh4iV00n1tc0HQ8zpmSl1; __utmc=301 ...

  10. webpack报错运行时没有定义

    一.问题描述 ReferenceError: regeneratorRuntime is not defined 二.问题分析 缺少regenerator的运行时库,具体原理,可查看babel文章. ...