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");
    }  
  })
})();

HTML拖放-当可拖动元素未放置在有效的放置代理上时接收事件

1 个答案: