Menu
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 -
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?
If that's the case what are the scenarios where using drag won't work? or using mouse event won't work?
How to choose which way to implement drag and drop feature? any pros or cons in both methods?
Any other way? (I mean other than mouse events and drag event)
268
The basic difference between a click and a drag event is the mouse movement. The mouse event that differentiates a click and drag event is the “mouse move” event. In a “click” event, there is no “mouse move” event.
Typically, a drag show involves performers singing or lip-synching to songs while performing a pre-planned pantomime or dancing. There might also be some comedy, skits, and audience interaction.
The mouse event that differentiates a click and drag event is the “mouse move” event. In a “click” event, there is no “mouse move” event. However, the “mouse down” and “mouse up” event remains the same for both click and drag.
You can select a draggable visual element, drag it to a droppable visual element, and release the element to drop it. The base class for all drag and drop events is DragAndDropEventBase. Sent when the drag and drop process ends.
The DragExitedEvent is sent when the user drags any draggable object over a visual element and releases the mouse pointer. When a drop area visual element receives a DragExitedEvent, it needs to remove all feedback from drag operations.
To implement drag and drop functionality, make sure that visual elements register callbacks for specific events. Visual elements that support drag operations separate into two types: You can select a draggable visual element, drag it to a droppable visual element, and release the element to drop it.
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.
170
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
