JQuery On Drop 是 JQuery 的一個(gè)事件處理函數(shù),它可以響應(yīng)元素在拖拽操作后被放置的動(dòng)作,并對其進(jìn)行相應(yīng)的處理和操作。
$("元素").on("drop", function(event) { //執(zhí)行相應(yīng)的操作 });
這段代碼中,我們使用on方法來注冊元素的drop事件。其函數(shù)回調(diào)中的event參數(shù)提供了所有必要的信息,我們可以通過它來獲取元素被拖拽到何處,或是在元素被放置后需要執(zhí)行的操作。比如:
$("元素").on("drop", function(event) { let data = event.originalEvent.dataTransfer.getData("text"); //獲取拖拽元素的數(shù)據(jù) $(this).html(data); //將數(shù)據(jù)放置到當(dāng)前元素中 });
在這個(gè)例子中,我們獲取了被拖拽元素的數(shù)據(jù),然后將其放置到當(dāng)前元素中。這個(gè)例子只是 JQuery On Drop 的一個(gè)簡單應(yīng)用,我們可以根據(jù)實(shí)際需求來進(jìn)行更加復(fù)雜的操作。
值得注意的是,使用 JQuery On Drop 必須注意在元素上要阻止默認(rèn)的拖拽事件和放置事件,否則它們會(huì)影響到 On Drop 事件的正常處理。
$("元素").on("dragover", function(event) { //阻止拖拽事件的默認(rèn)行為 event.preventDefault(); }); $("元素").on("drop", function(event) { //阻止放置事件的默認(rèn)行為 event.preventDefault(); });
在這個(gè)例子中,我們分別使用 on 方法注冊了元素的 dragover 和 drop 事件,并通過 event.preventDefault() 阻止了它們的默認(rèn)行為,使 JQuery On Drop 可以正常執(zhí)行。