js 利用jquery.gridly.js实现拖拽并且排序
Posted 多多明明
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js 利用jquery.gridly.js实现拖拽并且排序相关的知识，希望对你有一定的参考价值。
<!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实现拖拽并且排序的主要内容，如果未能解决你的问题，请参考以下文章