一個(gè)輕簡的jQuery拖放排序插件DDSort

2021-10-18 16:26 更新
ie兼容6
插件描述:jQuery任意拖動(dòng)頁面中元素代碼

使用方法:

1、假設(shè)Html結(jié)構(gòu)如下:

<div id="wrap">
    <ul>
        <li>...</li>
        <li>...</li>
        ...
    </ul>
</div>

2、依次引入jquery.js和ddsort.js,然后使用DDSort API實(shí)現(xiàn)如圖拖放排序效果:

$( '#wrap' ).DDSort({
    target: 'li',           //示例而用,默認(rèn)即'li'
    floatStyle: {           //示例二用,默認(rèn)有一定的樣式
        'border''1px solid #ccc',
        'background-color''#fff'
    }
});

3、如果拖放列表帶有滾動(dòng)條,那么$( '#wrap' )要是這個(gè)滾動(dòng)條的元素。

詳細(xì)API

DDSort方法接受一個(gè)JSON對(duì)象類型的參數(shù),以下是對(duì)這個(gè)參數(shù)的描述。

參數(shù)列表類型描述
target string可選,插件內(nèi)部使用的是jQuery的on方法綁定的事件,此參數(shù)就是on方法上的選擇器字符串,默認(rèn)'li'
cloneStyleobject可選,設(shè)置占位符元素的樣式
floatStyleobject可選,設(shè)置拖動(dòng)元素的樣式
downfunction鼠標(biāo)按下時(shí)執(zhí)行的函數(shù)
movefunction可選,鼠標(biāo)移動(dòng)時(shí)執(zhí)行的函數(shù)
upfunction可選,鼠標(biāo)抬起時(shí)執(zhí)行的函數(shù)

以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)