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

html drag-and-drop
lisovaccaro picture lisovaccaro · Sep 2, 2011 · Viewed 64.1k times · Source

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?

Answer

robertc picture robertc · Sep 3, 2011

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.

Related questions

drag drop files into standard html file input

These days we can drag & drop files into a special container and upload them with XHR 2. Many at a time. With live progress bars etc. Very cool stuff. Example here. But sometimes we don't want that much coolness. What …

Read More
How do I remove a file from the FileList

I'm building a drag-and-drop-to-upload web application using HTML5, and I'm dropping the files onto a div and of course fetching the dataTransfer object, which gives me the FileList. Now I want to remove some of the files, but I don't …

Read More
Is there a good jQuery Drag-and-drop file upload plugin?

Is there a nice tidy jQuery plugin that allows including a single JS script then using a simple snippet to enable a form? Something like this: $j('#MyForm').enableDragDropUploads('.upload-area') With the upload target being the action of …

Read More