jQuery dragmove 是一個(gè)非常強(qiáng)大的 jQuery 插件,它允許用戶通過(guò)鼠標(biāo)拖拽來(lái)移動(dòng) DOM 元素。
$(document).ready(function(){
var dragEl = $("#dragme");
dragEl.draggable({
start: function() {
//開(kāi)始拖拽
},
drag: function() {
//正在拖拽
},
stop: function() {
//停止拖拽
}
});
});
在上面的代碼中,我們首先選擇拖拽元素,然后使用draggable()
方法使其可拖拽。在參數(shù)選項(xiàng)中,我們可以定義三個(gè)事件:start
、drag
和stop
,分別表示開(kāi)始拖拽、正在拖拽和停止拖拽。
通過(guò)如下代碼,我們可以修改拖拽元素的行為:
dragEl.draggable({
containment: "parent", //限制元素移動(dòng)范圍
revert: true, //拖拽結(jié)束后自動(dòng)回到原位置
cursor: "move" //拖拽時(shí)鼠標(biāo)樣式
});
其他可用參數(shù)選項(xiàng)包括 axis(限制元素只能在水平或垂直方向上移動(dòng))、scroll(拖拽到邊界時(shí)自動(dòng)滾動(dòng)父容器)、grid(限制元素只能以指定的網(wǎng)格大小移動(dòng))等等。
總之,jQuery dragmove 插件為我們提供了非常便利的拖拽功能,極大地簡(jiǎn)化了開(kāi)發(fā)過(guò)程。