Drag Event vs Mouse events for Drag and Drop

Question

Recently I started to learn Drag and Drop API and was going through some tutorial on Youtube starting with this which was pretty good, Understood the whole Drag Cycle.

But I saw some other tutorials which were not using drag but the drag feature was created using mouseup, mousedown, mousemove events.

I am currently researching on Vanilla JS

I am still trying to find an answer to -

1. Why use mouse events over drag event? Is it that few things which can be done using mouse events cannot be done using drag event?

2. If that's the case what are the scenarios where using drag won't work? or using mouse event won't work?

3. How to choose which way to implement drag and drop feature? any pros or cons in both methods?

4. Any other way? (I mean other than mouse events and drag event)

Medius

Answer 1

I'm not sure why your question has received two close votes ? I think it's a reasonable enough thing to ask, there is an HTML Drag and Drop API but most implementations use mouse events and absolute positioning. You can always tell this because they limit the dragging to the browser page you started the drag on.

HTML5 Drag and Drop allows you to drag "outside of" the browser and to interact with other applications. You can drag and drop between browser tabs for example or you can drag data from a word processor and drop it in your web app with the drag and drop API. You could also drag stuff from your web app and drop it on a native application.

You can't do any of the above with stuff like the jquery draggable API for example. If you wanted to move an element around the page, then the jquery draggable approach is much easier to implement, the drag and drop API will "ghost" the dragged element for example whereas if it is absolutely positioned you can just update it's coordinates on mouse move etc.

Here's a sortable list implemented with HTML5 drag and drop from I worked with this stuff a few years ago.

My advice would be - if you want to move elements around in the same page i.e. reposition things, or you have no need to drag between browser tabs or accept data from other applications, HTML 5 DnD is probably gonna be frustrating to work with.

Hope this helps.

Causey

Wow, Thanks Woody, This helps a lot. I want to use dragndrop for a personal project in React and started with the bare bones of this feature in Vanilla JS. Trying to learn ins and outs of this. – Medius