28

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?

lisovaccaro
  • 32,502
  • 98
  • 258
  • 410
  • 1
    possible duplicate of [HTML5 Drag and Drop anywhere on the screen](http://stackoverflow.com/questions/6230834/html5-drag-and-drop-anywhere-on-the-screen) – robertc Sep 03 '11 at 00:34
  • If you want to do it the Jquery way, [this](https://stackoverflow.com/a/47521404/6901876) is the best solution, and far easier than the pure Javascript solution. – Cannicide Nov 27 '17 at 23:23

2 Answers2

62

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.

Community
  • 1
  • 1
robertc
  • 74,533
  • 18
  • 193
  • 177
  • 1
    @Luis, while dragging the element you can set `iframe { pointer-events: none; }` and you can drag element over the iframe – itodd Aug 23 '17 at 01:51
0

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.

Vaibhav Nigam
  • 1,334
  • 12
  • 21