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

web components
How to Create a Native Web Component Without a Framework
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…
Patrick Jahr
pwa
Playing Hide & Seek with my Service Worker Instance!
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…
Steffen Jahr
asp.net core
Anreichern mit Attributen: ASP.NET Core API-Dokumentation mit Swagger - Teil 3 [Screencast]
Thinktecture Backend- und API-Spezialist Sebastian Gingter zeigt in dieser 10-teiligen Screencast-Serie wie man seine ASP.NET Core 3.1-API mithilfe von Swagger dokumentieren kann. Im dritten Teil sehen wir, wie man die bisher eher rudimentäre Dokumentation aufpeppt. Mit…
Sebastian Gingter
tools
Fiddler in Action: Mocking and Manipulating API Behavior With a Local Proxy Server - Part 5
In this five-part article series, you learn how to manipulate your API behavior with a local proxy server. So far, this series has covered an introduction, taught you how to set up and configure Charles Proxy, and you have seen it in action. After presenting the Fiddler setup, we…
Thinktecture Team