温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

DWZ开源框架table、div拖动效果

发布时间:2020-07-02 09:43:08 来源:网络 阅读:1852 作者:xin891120 栏目:web开发

   首先DWZ富客户端框架(jQuery RIA framework), 是中国人自己开发的基于jQuery实现的Ajax RIA开源框架。写这篇博文是因为在工作中遇到了,拖动table的排序的效果。而在DWZ本身框架中只能对div进行拖动。

   要实现拖动效果最需要dwz.sortDrag.js。在dwz.sortDrag.js中原本配置的是

  1. var _op = { 
  2.         cursor: 'move', // selector 的鼠标手势 
  3.         sortBoxs: 'div.sortDrag', //拖动排序项父容器 
  4.         replace: true, //2个sortBox之间拖动替换 
  5.         items: '> *', //拖动排序项选择器 
  6.         selector: '', //拖动排序项用于拖动的子元素的选择器,为空时等于item 
  7.         zIndex: 1000 
  8.     }; 

产生的效果图:

DWZ开源框架table、div拖动效果

上面代码是实现div拖动效果的。要想实现table拖动效果,只要在你要拖动到页面上加上下面的js代码即可:

  1. $(function() { 
  2.         var options = { 
  3.                 cursor: 'move', // selector 的鼠标手势 
  4.                 sortBoxs: 'tbody.sortDrag', //拖动排序项父容器 
  5.                 replace: true, //2个sortBox之间拖动替换 
  6.                 items: '> tr', //拖动排序项选择器 
  7.                 selector: 'td:first', //拖动排序项用于拖动的子元素的选择器,为空时等于item 
  8.                 zIndex: 1000 
  9.             }; 
  10.         debugger; 
  11.         $('tbody', navTab.getCurrentPanel()).sortDrag(options); 
  12.     });  

只是将里面的参数变成table中的元素。但是这个在IE中用的没有在Chrome中兼容性强,table中实现的效果图就是

DWZ开源框架table、div拖动效果

 

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI