`
ranyut
  • 浏览: 260788 次
  • 性别: Icon_minigender_1
  • 来自: 重庆
社区版块
存档分类
最新评论

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 

分享到:
评论

相关推荐

    gridly-js拖拽排序

    综上所述,Gridly-js是一个强大且易用的拖放排序插件,尤其适用于需要对标签进行动态管理和排序的网页应用。通过深入理解和应用这个插件,开发者可以构建出更具互动性和用户体验的标签管理系统。

    Jquery Sortable实现div拖动排序效果

    本篇文章将深入探讨如何使用 jQuery Sortable 实现div的拖动排序效果。 首先,你需要在项目中引入 jQuery 和 jQuery UI 的库。jQuery 是一个广泛使用的JavaScript库,而 jQuery UI 提供了包括Sortable在内的多种...

    移动端拖动排序

    提到"jquery.gridly",这可能是一个基于jQuery库的插件,用于实现网格布局的拖动排序功能。jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理和动画效果。Gridly插件可能利用jQuery提供的API,结合...

    jquery拖动插件

    本主题将深入探讨“jQuery拖动插件”,尤其是提及的“Gridly”插件,这是一种允许用户自由配置界面的工具,为web界面开发带来了极大的便利。 ### jQuery拖动功能 jQuery拖动功能主要通过其插件实现,如`draggable...

Global site tag (gtag.js) - Google Analytics