DWZ開源框架table、div拖動(dòng)效果

   首先DWZ富客戶端框架(jQuery RIA framework), 是中國人自己開發(fā)的基于jQuery實(shí)現(xiàn)的Ajax RIA開源框架。寫這篇博文是因?yàn)樵诠ぷ髦杏龅搅耍蟿?dòng)table的排序的效果。而在DWZ本身框架中只能對(duì)div進(jìn)行拖動(dòng)。

   要實(shí)現(xiàn)拖動(dòng)效果最需要dwz.sortDrag.js。在dwz.sortDrag.js中原本配置的是

var _op = { 
        cursor: 'move', // selector 的鼠標(biāo)手勢(shì) 
        sortBoxs: 'div.sortDrag', //拖動(dòng)排序項(xiàng)父容器 
        replace: true, //2個(gè)sortBox之間拖動(dòng)替換 
        items: '> *', //拖動(dòng)排序項(xiàng)選擇器 
        selector: '', //拖動(dòng)排序項(xiàng)用于拖動(dòng)的子元素的選擇器，為空時(shí)等于item 
        zIndex: 1000 
    }; 

產(chǎn)生的效果圖：

上面代碼是實(shí)現(xiàn)div拖動(dòng)效果的。要想實(shí)現(xiàn)table拖動(dòng)效果，只要在你要拖動(dòng)到頁面上加上下面的js代碼即可：

$(function() { 
        var options = { 
                cursor: 'move', // selector 的鼠標(biāo)手勢(shì) 
                sortBoxs: 'tbody.sortDrag', //拖動(dòng)排序項(xiàng)父容器 
                replace: true, //2個(gè)sortBox之間拖動(dòng)替換 
                items: '> tr', //拖動(dòng)排序項(xiàng)選擇器 
                selector: 'td:first', //拖動(dòng)排序項(xiàng)用于拖動(dòng)的子元素的選擇器，為空時(shí)等于item 
                zIndex: 1000 
            }; 
        debugger; 
        $('tbody', navTab.getCurrentPanel()).sortDrag(options); 
    });  

只是將里面的參數(shù)變成table中的元素。但是這個(gè)在IE中用的沒有在Chrome中兼容性強(qiáng)，table中實(shí)現(xiàn)的效果圖就是