I've made an example here:
When I start dragging a link, the cart should turn to green. When the item is dragged over the cart, the cart should become red.
This works, but only if the cart is empty :|
If there are any other elements in it, leave
seems to be triggered when I drag the item over those elements. How can I prevent that from happening?
I've tried moving the event listener to the document
element and check if event.target
is a child or grandchild of cart
but then leave
seems to be triggered randomly on body
even when the item is within the cart zone, so my class gets removed when it's not supposed to :(
Edit: found a few hacky solutions here: 'dragleave' of parent element fires when dragging over children elements
so you can delete this Q :)