在 JavaScript 中,Sortable.js 是一個非常流行的拖放庫,它提供了豐富的 API 來實現拖拽功能。其中一個重要的特性就是支持拖拽回調函數。
當拖拽開始時(即用戶按下鼠標并開始拖動元素),Sortable.js 會觸發一個名為 onUpdate
的回調函數。這個函數會在元素的位置發生變化時被調用,允許你在拖拽過程中執行自定義的邏輯。
以下是一個簡單的示例,展示了如何在 Sortable.js 中使用 onUpdate
回調函數:
const sortable = new Sortable(el, {
onUpdate: function(event) {
console.log('Element position has changed:', event.oldIndex, '->', event.newIndex);
// 在這里執行你的自定義邏輯
}
});
在上面的示例中,el
是你要進行拖拽操作的元素的選擇器。onUpdate
回調函數會在元素位置發生變化時被調用,并接收一個包含事件信息的對象作為參數。你可以通過 event.oldIndex
和 event.newIndex
來獲取元素在拖拽前后的索引,從而執行相應的邏輯。
除了 onUpdate
回調函數外,Sortable.js 還提供了其他許多回調函數,如 onStart
、onEnd
等,以支持拖拽過程中的不同階段。你可以查閱 Sortable.js 的官方文檔以獲取更多關于回調函數的信息和使用示例。