With HTML5 can an element be made 'invisible' for drag/drop interaction?

Question

Still trying to combine drag&drop and moving an element with the mouse I'm struggling with dragenter and dragleave not being called for a parent element when I'm moving the child element. This seems quite natural because the element always hovers over the parent element and prevents dragenter being called for the parent.

I tried to call stopPropagation() and preventDefault() in dragenter, dragleave, dragover, dragstart and drag events for the child element but with no real effect.

Another question seems to address a similar issue but with no real solution if I get this correctly.

Maybe it's just too dark down here in the rabbit hole to see the obvious - how do I prevent the dragged item from avoiding its parents dragenter/dragleave events to be called?

On another level I just want to know if the element has been dropped outside the parent element (to then return it to it's original position). Is there an easier approach?

Here is my current code - In the current state the element is being moved with the mouse and thus preventing dragenter or dragleave being called.

Deactivating the actual movement of draggable_element will make dragenter and dragleave be called when leaving the parent/target area but also when the dragged element is being entered (what I somehow can't avoid).

Answer 1

Found it - instead fiddling with the drag/drop events you just have to deactivate pointer-events for the dragged item to avoid unwanted dragenter/dragleave events for the parent and turn it back on again afterwards (it has to be activated by default to enable dragging in the first place).

draggable_element.addEventListener("dragstart", (e) => {
  e.srcElement.style.pointerEvents = "none";
  ... // rest of code
});

elem.addEventListener("dragend", (e) => {
  e.srcElement.style.pointerEvents = "auto";
  ... // rest of code
});

Here is a working example: https://jsfiddle.net/03a9s4ur/10/