jQuery的ondrop事件可以讓你在元素被拖放時執行代碼。當你將一個元素從一個位置拖動到另一個位置時,該元素會觸發ondrop事件。
使用下面的代碼示例來理解ondrop事件:
$(document).ready(function(){ $("p").on("dragover", function(event){ event.preventDefault(); $(this).addClass("highlight"); }); $("p").on("drop", function(event){ event.preventDefault(); var data = event.originalEvent.dataTransfer.getData("text"); $(this).removeClass("highlight"); $(this).append(data); }); });
在代碼示例中,我們在文本段落上綁定了“dragover”事件和“drop”事件。當你將一個文本段落拖動到另一個文本段落上時,ondrop事件將被觸發。這時,ondrop事件會拿到被拖動的元素以及元素所在的位置,并在拖動后將它們添加到目的地。
在代碼示例中,我們使用event.preventDefault()方法來阻止瀏覽器在將一個元素拖動到另一個元素時進行默認操作。通過調用$(this).addClass("highlight")方法,我們給目標元素添加了一個高亮類,這樣用戶就可以更容易地看到他們正在嘗試拖放到何處。
當拖放完成時,我們再次使用event.preventDefault()方法以確保我們執行了正確的ondrop響應。我們這次使用$(this).removeClass("highlight")方法來刪除目標元素上的高亮類,并使用$(this).append(data)方法將拖放元素添加到目標元素中。
現在,你已經理解了如何使用jQuery ondrop事件。它是一個非常有用的技術,可以讓你在拖動元素時執行自定義代碼。