W3Cschool
恭喜您成為首批注冊(cè)用戶
獲得88經(jīng)驗(yàn)值獎(jiǎng)勵(lì)
插件描述: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)條的元素。
DDSort方法接受一個(gè)JSON對(duì)象類型的參數(shù),以下是對(duì)這個(gè)參數(shù)的描述。
參數(shù)列表 | 類型 | 描述 |
target | string | 可選,插件內(nèi)部使用的是jQuery的on方法綁定的事件,此參數(shù)就是on方法上的選擇器字符串,默認(rèn)'li' |
cloneStyle | object | 可選,設(shè)置占位符元素的樣式 |
floatStyle | object | 可選,設(shè)置拖動(dòng)元素的樣式 |
down | function | 鼠標(biāo)按下時(shí)執(zhí)行的函數(shù) |
move | function | 可選,鼠標(biāo)移動(dòng)時(shí)執(zhí)行的函數(shù) |
up | function | 可選,鼠標(biāo)抬起時(shí)執(zhí)行的函數(shù) |
Copyright©2021 w3cschool編程獅|閩ICP備15016281號(hào)-3|閩公網(wǎng)安備35020302033924號(hào)
違法和不良信息舉報(bào)電話:173-0602-2364|舉報(bào)郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號(hào)
聯(lián)系方式:
更多建議: