Перетаскивание HTML - получение события, когда перетаскиваемый элемент НЕ сбрасывается в действительном агенте перетаскивания.

Question

Как я могу получить событие, когда перетаскиваемый элемент НЕ сбрасывается на действительного агента удаления. Слушатель дропа и драже назначается в разных замыканиях. Я бы предпочел не полагаться на тайм-ауты и глобальные пространства имен.

У меня есть обходной путь, который использует таймауты и глобальные пространства имен, которые показывают функциональность, которую я ищу.

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