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 :)

Related Articles

 | Patrick Jahr

What to expect Learn how to create a native Web Component using LitElement Step-by-step explanations How to render your HTML template Adding styles Using asynchronous properties All based on a sample built with Visual Studio Code You can find a running example on stackblitz. What…

Read article
 | Patrick Jahr

What to expect Learn how to create a native Web Component without using a framework Explanation of all steps and essentials points like HTML Templates, Custom Elements and shadow DOM to create a Web Component, based on a sample built with Visual Studio Code. What are Web…

Read article
 | Steffen Jahr

If you are working with Service Workers for the first time you'll probably have noticed that the Service Worker's functionality can be found on different objects. This can be a little bit confusing. First of all the API is a little bit misleading because is not an instance of…

Read article