CODEWITHSUNDEEP
htmldrag-and-drop
lisovaccaro
lisovaccaro

Reputation: 33956

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?

Upvotes: 28

Views: 69129

Answers (2)

Vaibhav Nigam
Vaibhav Nigam

Reputation: 1467

To add to 2nd point in @robertc's answer, to make an element droppable anywhere in the entire document, the drop event can be listened to document.documentElement instead of body.

In some cases, body may not have the exact dimensions of the page and therefore, the element cannot be dragged outside the boundary of body.

Here is the solution I proposed.

Upvotes: 1

robertc
robertc

Reputation: 75717

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.

Upvotes: 63

Related Questions