Discussion on: Creating a Kanban Board with HTML, CSS & JavaScript

[teamradhq]

It's not a side effect. It's expected behaviour.

This happens because the element is appended to the drop Event.target . The target is the element that dispatched the event... So if you're moused over the previously dropped task, then the dropped task will be appended to the previous task element.

So if you keep dropping on the previous task element, this happens:

If you want to ensure that the drop event is always applied to the element that handles the event, use Event.currentTarget instead. It always refers to the element the event was attached to.

Append to the element where the event occurred (current behaviour):

ev.target.appendChild(document.getElementById(data));

Append to the element that handles the event (fixes the isssue):

ev.currentTarget.appendChild(document.getElementById(data));

Hope this helps :)

Further reading:

• MDN Event.currentTarget

• MDN Event.target

• Stackoverflow: What is the exact difference between currentTarget property and target property in JavaScript?

[karthikdevarticles]

Yeah, that solves it. Thank you.