From 86254de552e2d541e291085b603c05366c72b7cf Mon Sep 17 00:00:00 2001 From: Niklas Kiefer Date: Mon, 25 Sep 2023 13:48:19 +0200 Subject: [PATCH] fix(util/dragger): handle dragover events during capture phase We need to do this to make sure we track cursor movements before we reach other drag event handlers, e.g. in child containers. Related to #289 Related to https://github.com/camunda/web-modeler/issues/5892#issuecomment-1733155870 --- src/components/util/dragger.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/components/util/dragger.js b/src/components/util/dragger.js index 9282ea03..c4b13b72 100644 --- a/src/components/util/dragger.js +++ b/src/components/util/dragger.js @@ -39,7 +39,12 @@ export function createDragger(fn, dragPreview) { // (2) setup drag listeners // attach drag + cleanup event - document.addEventListener('dragover', onDrag); + // we need to do this to make sure we track cursor + // movements before we reach other drag event handlers, + // e.g. in child containers. + document.addEventListener('dragover', onDrag, true); + document.addEventListener('dragenter', preventDefault, true); + document.addEventListener('dragend', onEnd); document.addEventListener('drop', preventDefault); } @@ -55,7 +60,9 @@ export function createDragger(fn, dragPreview) { } function onEnd() { - document.removeEventListener('dragover', onDrag); + document.removeEventListener('dragover', onDrag, true); + document.removeEventListener('dragenter', preventDefault, true); + document.removeEventListener('dragend', onEnd); document.removeEventListener('drop', preventDefault); }