Search code examples
htmldrag-and-drop

HTML5 drag and drop to move a div anywhere on the screen?

The title is pretty self explanatory.

All the demos I've found consist in dropping a div to a certain location. E.G a trashcan. I need to make a draggable div that can be dropped anywhere on the screen.

Is it possible to do this with HTML5? if not how should I do it?

Solution

  • It's quite straightforward really:

    1. In the dragstart event calculate the offset between where the user clicked on the draggable element and the top left corner
    2. Make sure the dragover event is applied to the entire document so the element can be dropped anywhere
    3. In the drop event, use the offset you calculated with the clientX and clientY of the drop to work out where to position the element

    Here's one I prepared earlier. For bonus points you can update the top and left position of the element in the dragover event, this is useful if the bit you're allowing to be dragged isn't the whole element that needs to be moved.