jQuery Gridly 拖拽排序插件获得拖动的位置

jQuery Gridly 拖拽排序插件获得拖动的位置

Installation

To install download one of these packages and include the jquery.gridly.js and jquery.gridly.css files in your head with the following:

 

 github: https://github.com/ksylvest/jquery-gridly

 

1. <scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"type="text/javascript"></script>
2. <scriptsrc="javascript/jquery.gridly.js"type="text/javascript"></script>
3. <linkhref="stylesheets/jquery.gridly.css"rel="stylesheet"type="text/css"/>

Example

Setting up a gridly is easy. The following snippet is a good start:

1. <style type="text/css">
2.   .gridly {
3.     position: relative;
4.     width: 960px;
5.   }
6.   .brick.small {
7.     width: 140px;
8.     height: 140px;
9.   }
10.   .brick.large {
11.     width: 300px;
12.     height: 300px;
13.   }
14. </style>
15. <div class="gridly">
16.   <div class="brick small"></div>
17.   <div class="brick small"></div>
18.   <div class="brick large"></div>
19.   <div class="brick small"></div>
20.   <div class="brick small"></div>
21.   <div class="brick large"></div>
22. </div>
23. <script>
24.   $('.gridly').gridly({
25.     base: 60, // px 
26.     gutter: 20, // px
27.     columns: 12
28.   });
29. </script>

 

可以进行拖动、排序，动态效果。

 

怎么获取拖动的位置，进行排序保存呢？

之前有人说获取不到，实际上是可以的，通过两个回调函数实现，reordering拖动前回调，reordered拖动后回调。在初时化时需要这样指定：

1. //初始化设置
2. $('.gridly').gridly({
3. callbacks:{ reordering: reordering , reordered: reordered }
4. });​​

 

回调函数实例：

1. //拖动前回调
2. var reordering =function($elements){
3. // Called before the drag and drop starts with the elements in their starting position.
4. //alert('start');
5. };
6.  
7. //拖动后回调
8. var reordered =function($elements){
9. // Called after the drag and drop ends with the elements in their ending position.
10. // 当前对象
11. var currentObj =this.reordered.arguments[1];
12. var currentId = currentObj[0].id;
13. alert('拖动对象：'+ currentId);
14.  
15. var arr = $elements;
16. // 前一个对象
17. var prevObj;
18. // 后一个对象
19. var afterObj;
20. for(i =0; i < arr.length; i++){
21. if(arr[i].id == currentId){
22. if(i >0){
23. prevObj = arr[i -1];
24. }
25. if(i +1< arr.length){
26. afterObj = arr[i+1];
27. }
28. }
29. }
30. if(prevObj !=undefined){
31. alert('前一个对象：'+ prevObj.id)
32. }
33. if(afterObj !=undefined){
34. alert('后一个对象：'+ afterObj.id);
35. }
36. //执行保存排序，更新数据
37. //sortData...
38. };
39.  
40.  
41.  //初始化设置
42.  $('.gridly').gridly({
43.  callbacks: { reordering: reordering , reordered: reordered }
44.  });​

 

在回调函数里得到了拖动的对象及前后位置的对象就可以知道位置了，再执行更新数据保存排序即可。

 

按官方文档做一个例子，可以下载附件 jquery-gridly-callback