Scribd
Upload
51 views2 pages

HTML5 Drag and Drop

HTML5 introduces native drag and drop functionality, allowing users to drag and drop elements directly in the browser without complex JavaScript. It supports common drag and drop events like dragstart, dragenter, dragover, dragleave, drop, and dragend to handle different stages of the drag and drop process. Previously, drag and drop required JavaScript frameworks but HTML5 provides a simpler Drag and Drop API for a better user experience.

Uploaded by

devendra
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
51 views2 pages

HTML5 Drag and Drop

HTML5 introduces native drag and drop functionality, allowing users to drag and drop elements directly in the browser without complex JavaScript. It supports common drag and drop events like dragstart, dragenter, dragover, dragleave, drop, and dragend to handle different stages of the drag and drop process. Previously, drag and drop required JavaScript frameworks but HTML5 provides a simpler Drag and Drop API for a better user experience.

Uploaded by

devendra
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

HTML5 - Drag & drop

Drag and Drop (DnD) is powerful User Interface concept which makes it easy to copy, reorder
and deletion of items with the help of mouse clicks. This allows the user to click and hold the
mouse button down over an element, drag it to another location, and release the mouse button to
drop the element there.

To achieve drag and drop functionality with traditional HTML4, developers would either have to
either have to use complex JavaScript programming or other JavaScript frameworks like jQuery
etc.

Now HTML 5 came up with a Drag and Drop (DnD) API that brings native DnD support to the
browser making it much easier to code up.

HTML 5 DnD is supported by all the major browsers like Chrome, Firefox 3.5 and Safari 4 etc.

Drag and Drop Events

There are number of events which are fired during various stages of the drag and drop operation.
These events are listed below −

Sr.No. Events & Description

dragstart
1
Fires when the user starts dragging of the object.
dragenter

2 Fired when the mouse is first moved over the target element while a drag is occurring. A
listener for this event should indicate whether a drop is allowed over this location. If there
are no listeners, or the listeners perform no operations, then a drop is not allowed by
default.
dragover
3 This event is fired as the mouse is moved over an element when a drag is occurring. Much
of the time, the operation that occurs during a listener will be the same as the dragenter
event.
dragleave
4
This event is fired when the mouse leaves an element while a drag is occurring. Listeners
should remove any highlighting or insertion markers used for drop feedback.
drag
5
Fires every time the mouse is moved while the object is being dragged.
6 drop
The drop event is fired on the element where the drop was occurred at the end of the drag
operation. A listener would be responsible for retrieving the data being dragged and
inserting it at the drop location.
dragend
7
Fires when the user releases the mouse button while dragging an object.

You might also like