27

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
  • 30,232
  • 96
  • 246
  • 398
  • 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

1 Answers1

59

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
  • 72,359
  • 18
  • 189
  • 173
  • 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