I am currently working on a drag and drop reordering list with react and ran in to some performance issues because of unnecessary re-rendering of the list elements. Long story short, it is being caused by numerous child (dragleave, dragenter) events firing while dragging the parent over the child (drag handle) when I havent even dragged the parent component outside of itself. What would be ideal is to find a way to make the child element part of the parent element in the sense of its drag boundaries. When I drag the parent over its child, the dragenter event should not fire for the child and the dragleave event should not fire for the parent, and vice versa going the other way. These events should only fire when I move across the parent component border.
I have tried with "pointer-events: none" and stopPropagation, but neither of them work for me since I have a mousedown handler on the child div which makes the parent element draggable which no longer works without the pointer events set to none.
Here is some example code:
HTML
<!DOCTYPE html>
<html>
<body>
<div class="container">
<div class="child">
Drag Me
</div>
</div>
</body>
</html>
Javascript
const container = document.querySelector(".container");
const child = document.querySelector(".child");
child.addEventListener("mousedown", (e) => {
container.setAttribute("draggable", "true");
})
child.addEventListener("mouseup", (e) => {
container.setAttribute("draggable", "false");
})
container.addEventListener("dragend", (e) => {
container.setAttribute("draggable", "false");
})
container.addEventListener("dragenter", (e) => {
console.log(`dragenter ${e.target.className}`);
})
container.addEventListener("dragleave", (e) => {
console.log(`dragleave ${e.target.className}`);
})
Here is a jsfiddle to demonstrate: https://jsfiddle.net/d1videbyzero/x21jL3fa/75/
All help is appreciated.