Drag & Drop vs. MouseEvents - A misunderstanding

A few weeks ago one ouf our customers asked me what he can use if he wanted to move (in his words drag and drop) a HTML element. He told me that he found several examples using jQuery respectively jQuery UI but he wanted to have a plain solution without jQuery. His first approach was to use HTML5 drag & drop. But it didn't work for him. I asked him why he used Drag and Drop. He told me that he searched after Drag & Drop because Drag & Drop are the jQuery keywords.

For me it is clear why it didn't work. HTML5 Drag & Drop is not to move HTML elements but also to move data objects from one location (or HTML element) to another. To move HTML elements he has to use MouseEvents, especially:

  • MouseDown: Grab the element
  • MouseMove: Move the element
  • MouseUp: Release the element

I asked me why my customer started with HTML5 Drag and Drop instead of the MouseEvents. I think it is historically conditioned from jQuery. On jQuery there is Drag and Drop to move elements (draggable) or to drop elements (droppable). HTML elements!

But this is not the only source I found where the terms Drag & Drop aren't not clearly defined. It seems that the naming of Drag & Drop is a big misunderstanding. The German Wikipedia describes Drag & Drop as a method to control the GUI with moving elements with help of a pointer. There are many other search results where moving HTML element with the mouse is described as Drag & Drop.

But in HTML5 Drag & Drop is something different.

Drag & Drop is to move data objects from one location to another. The Mozilla Developer Network is also not specifying it clearly. They write about "elements" which can be in the HTML environment quickly can be misunderstood. Especially if you are a former jQuery developer. Like my customer misunderstood it. Former jQuery developers are adapted to Drag & Drop as a technique to move HTML elements. And this is not what HMTL5 Drag & Drop means.

In summary this means:

  • Using MouseEvents if you want to move HTML-Elements.
  • HTML5 Drag & Drop when you want to transfer objects.

I hope I could make it a little bit clearer when to use Drag & Drop and when not :) So have fun with moving elements or drag & drop objects :)