I am currently implementing a todo app in vuejs. The todo app must have a drag and drop feature, which allows the user to drag either before or after the elements in the list, and should update the dom on both drag and drop. I can't use other modules like vue draggable or sortable js.
Currently my code lists the todo items with a v-for tag in the vuejs template, and I use pure javascript to detect where the dragged item should be placed, and update the dom by taking the dragged element, then appending it or inserting it in a certain position.
This only works with the dom, and for the todo object, I listen for the dragdrop event, and do the same thing. I calculate where the item should be placed in the todo list object and remove the previous position.
However, if the item is dragged outside the container, the dom still updates, while the dragdrop event is never fired, so the todo object never gets updated.
I've tried to use mouse move on the body and container, but it seems as if mouse move doesn't work properly after using the drag api.
I've also tried using dragleave, but this event fires even when Iam inside the container, hovering over its child elements.
I've also just tried to only use javascript, and constantly updating the todo object on dragover. This works flawlessly in firefox, but in chrome lags too much.
Worked it out. I used the dragEnd listener to check if the clients x and y was within the container using
getBoundingClientRect().If the client was outside the container, I found the original position of the div using the todo object and inserted it back to the original place.