HTML拖放-當可拖動元素未放置在有效的放置代理上時接收事件

Question

當可拖動元素未放置在有效的放置代理上時，如何接收事件？ drop和dragend的偵聽器分配在不同的閉包中。 我寧願不要依賴超時和全局名稱空間。

我有一個使用超時和全局名稱空間的解決方法，該方法顯示了我正在尋找的功能。

//global namespace

let justDropped = false;



(() => {
  //closure for the drag events
  let dragElement = document.querySelector("#drag");

  dragElement.addEventListener("dragend", (e) => {
    if (!justDropped) {
      console.log("Not dropped on an valid drop-agent");
    }
  })
})();


(() => {
  //closure for drop event
  let dropElement = document.querySelector("#drop");

  dropElement.addEventListener("drop", (e) => {
    justDropped = true;
    setTimeout(() => {
      justDropped = false;
    }, 10)
  })
})();

Answer 1

無法通過拖放功能獲取放置目標，但是可以添加一個全局放置功能，您可以在其中檢查目標並檢查它是否在目標之外。

(() => {
  const htmlElement = document.querySelector("html");
  const dropElement = document.querySelector("#drop");

  htmlElement.addEventListener("drop", (e) => {
    if (e.currentTarget !== dropElement) {
      console.log("Not dropped on an valid drop-agent");
    }  
  })
})();