DEV Community

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

Collapse
teamradhq profile image
teamradhq • Edited

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:
Dropping with event target

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));
Enter fullscreen mode Exit fullscreen mode

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

ev.currentTarget.appendChild(document.getElementById(data));
Enter fullscreen mode Exit fullscreen mode

Hope this helps :)

Further reading:

Collapse
karthikdevarticles profile image
karthikdevarticles Author

Yeah, that solves it. Thank you.