首先DWZ富客户端框架(jQuery RIA framework), 是中国人自己开发的基于jQuery实现的Ajax RIA开源框架。写这篇博文是因为在工作中遇到了,拖动table的排序的效果。而在DWZ本身框架中只能对div进行拖动。
专业从事企业网站建设和网站设计服务,包括网站建设、域名注册、网络空间、企业邮箱、微信公众号开发、微信支付宝微信平台小程序开发、app软件开发公司、软件开发、等服务。公司始终通过不懈的努力和以更高的目标来要求自己,在不断完善自身管理模式和提高技术研发能力的同时,大力倡导推行新经济品牌战略,促进互联网事业的发展。
要实现拖动效果最需要dwz.sortDrag.js。在dwz.sortDrag.js中原本配置的是
- var _op = {
- cursor: 'move', // selector 的鼠标手势
- sortBoxs: 'div.sortDrag', //拖动排序项父容器
- replace: true, //2个sortBox之间拖动替换
- items: '> *', //拖动排序项选择器
- selector: '', //拖动排序项用于拖动的子元素的选择器,为空时等于item
- zIndex: 1000
- };
产生的效果图:
上面代码是实现div拖动效果的。要想实现table拖动效果,只要在你要拖动到页面上加上下面的js代码即可:
- $(function() {
- var options = {
- cursor: 'move', // selector 的鼠标手势
- sortBoxs: 'tbody.sortDrag', //拖动排序项父容器
- replace: true, //2个sortBox之间拖动替换
- items: '> tr', //拖动排序项选择器
- selector: 'td:first', //拖动排序项用于拖动的子元素的选择器,为空时等于item
- zIndex: 1000
- };
- debugger;
- $('tbody', navTab.getCurrentPanel()).sortDrag(options);
- });
只是将里面的参数变成table中的元素。但是这个在IE中用的没有在Chrome中兼容性强,table中实现的效果图就是