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

Not sure whether it is a bug or not, but I think the problem comes in when you change the DOM in the dragstart handler. The reason the first box works I presume has something to do with the fact that its position is before the other boxes in the DOM and when you change the DOM, the position (?) of the first one isn't affected and the dragdrop events fire reliably.

You will need to refactor your code somewhat, and add the dropSpaces in the dragenter event handler. You would need to change your addDropSpaces method to accommodate the fact that it will be called multiple times, though.