jQuery 是一個廣受歡迎的 JavaScript 庫,它使得開發者更容易地操作 HTML 文檔和事件處理。其中之一的功能就是 drag (拖動)的綁定。
我們可以通過 jQuery 的.draggable()
方法來綁定 drag。以下是一個基礎的例子:
$( "#draggable" ).draggable();
上述代碼會將 id 為 "draggable" 的元素綁定 drag。我們可以通過添加參數來進一步定制 drag 的行為,例如:axis: "y"
可以限制只能在垂直方向上拖動。
$( "#draggable" ).draggable({
axis: "y"
});
另一個有用的參數是containment
,可以指定一個父元素來限制 drag 的范圍,例如:
$( "#draggable" ).draggable({
containment: "#parent"
});
上述代碼會將拖動范圍限制在 id 為 "parent" 的元素內。
當然,我們也可以使用回調函數來監聽 drag 過程和事件。例如,drag
回調函數會在拖動過程中實時執行,而stop
回調函數會在拖動結束后執行。
$( "#draggable" ).draggable({
drag: function(event, ui) {
console.log("dragging");
},
stop: function(event, ui) {
console.log("drag stopped");
}
});
通過以上的簡單介紹,您現在應該可以開始在自己的項目中使用 jQuery 的 drag 綁定了。
下一篇jquery 素材