0

I am writing a 'drag-n-drop' library and want to create certain events for the user to hook on to. For example, before dropping an element onto another one, I create an event 'beforeDrop' with some data in the details field, and would like the user to be able to prevent the drop depending on the data. So, in an event handler created by the user, it could callback a library function (to actually do the drop) or not, depending on the data.

But if the user doesn't provide such a handler, the drop will never happen. I tried adding a default handler into the library, but there seems no way to guarantee the order that handlers are dealt with. Even if I add a timer to the library's handler, it still fires before the client's handler in Firefox (but not in Chrome).

document.addEventListener('beforeDrop', (e) => {
    setTimeout(doDrop(e), 50);  // I tried 500ms as well!
})
doDrop(e) {
    console.log('library: before drop: ' + e.detail.from + ' to ' + e.detail.to);
}
....
....
const event = new CustomEvent(beforeDrop, { detail: {from:fromDetail, to:toDetail}});
document.dispatchEvent(event);

I have looked at this question which seems to be trying to do something similar, but there is no definite answer and it may be trying something more complex than I need.

Sebastian Simon
  • 18,263
  • 7
  • 55
  • 75
quilkin
  • 874
  • 11
  • 31

0 Answers0