dragend, dragenter, and dragleave firing off immediately when I drag

Question

I\'m trying to make a list of elements which can be repositioned by dragging and dropping. The first element, Box 1, works just fine 100% of the time. Sometimes the second b

Answer 1

You need to prevent the "event" from bubbling up so it doesn't fire up other events. See https://developer.mozilla.org/en-US/docs/DOM/event.stopPropagation

For startDrag, toggleDropStyles, removeDropSpaces functions, you'd write something like this:

function startDrag(ev) {
   ev.stopPropagation();
   ... your code here ...
}