What is theDrag and Drop
(drag and drop)?
To put it simply, HTML5 provides a Drag and Drop API that allows users to select a dragable element with their mouse and move the mouse to a dragable element.
I’m sure everyone has experienced Drag and Drop at some point or another. Drag and Drop allows you to sort multiple tabs in a browser or sort apps on your phone. Drag and Drop has made web apps much easier and more flexible.
HTML5 Drag and Drop
The DnD specification defines an event-based drag-and-drop mechanism and additional tags to mark almost all draggable element types on a web page. A typical drag operation starts like this: The user selects a draggable element with the mouse, moves the mouse to a droppable element, and then releases the mouse. During the operation, several event types are fired, and some may be fired more than once (such as the Drag and dragover event types).
The summary is simple:
Drag Source(What to drag) => Drop Target(Where to drop)
Drag and drop event
All Drag events correspond to a global Event handler. The Dnd API has 8 events each, which can be divided into 3 events bound to Drag Source and 5 events bound to Drag Target
Drag Source
Event | Description |
---|---|
dragstart | Triggered when the user starts dragging an element or selected text. |
drag | Triggered when an element or selected text is dragged. |
dragend | Triggered when a drag action ends (such as releasing the mouse button or pressing the Esc key). |
Drop Target
Event | Description |
---|---|
dragenter | Triggered when an element or selected text is dragged to a releasable target. |
dragover | Triggered when an element or selected text is dragged onto a releasable target (every 100 milliseconds). |
dragexit | Triggered when an element becomes no longer the selected target of a drag operation. |
dragleave | Triggered when a drag element or selected text leaves a releasable target. |
drop | Emitted when an element or selected text is released on a releaseable target. |
Pay attention to the point
- There are some events that can fire more than one time during mouse operation drag and drop (for example:
drag
和dragover
). Note when usingImage stabilizationorThe throttle - in
dragover
Used in eventsevent.preventDefault()
Fires correctly when the default event behavior is blockeddrop
The event - Use when drop is triggered in the Firefox browser
event.preventDefault()
Prevents default event behavior to prevent opening a new TAB
Data interface
The data interface for HTML drag has three DataTransfer, DataTransferItem, and DataTransferItemList.
The DataTransfer object is used to hold data that is dragged to the browser during a drag-and-drop operation. It can hold one or more data items and one or more data types.
Common DataTransfer attributes
attribute | type | describe |
---|---|---|
dropEffect | String | Gets/sets the actual placement effect, which should always be set to one of the possible values for Effectalhoward,copy ,move ,link ,none |
effectAllowed | String | Used to specify the effect allowed when dragging. |
Files | FileList | Save as the first item a list of the types of data to be stored, in the order in which the data was added. An empty list is returned if no data is added. |
types | DOMStringList | Contains a list of all local files available for data transfer. If a drag operation does not involve a drag file, this property is an empty list. |
DataTransfer common methods
void clearData([in String type])
String getData(in String type)
void setData(in String type, in String data)
void setDragImage(in nsIDOMElement image, in long x, in long y)
Pay attention to the point
- By defining
MIME
(Multipurpose Internet Mail Exchange) to specify the data transfer type, for example:text/plain
Function test
Imagine that we want to develop a rich, interactive application using the HTML5 DnD API. The result is not bad because the browser does not support it. Whether we need to use the downgrading scheme or has a very important reference significance.
There are two common methods to help us detect this.
caniuse
Modernizr
Modernizr is an excellent library for detecting whether a user’s browser supports HTML5 and CSS3 capabilities.
if (Modernizr.draganddrop) {
// Browser supports HTML5 DnD.
} else {
// Fallback to a library solution.
}
Copy the code
Implement drag-and-drop
HTML Attribute
To do that, you just add draggable=”true” to the DOM tag
<div id="drag-source" draggable="true"></div>
Copy the code
CSS User Interface
user-select
You are advised to use user-select to avoid selecting internal elements during dragging.
[draggable="true"] {
/* To prevent user selecting inside the drag source */
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
Copy the code
cursor
Drag elements, it is recommended to use cursor, set the mouse cursor of drag elements, improve interaction.
[draggable="true"] {
cursor: move;
}
Copy the code
Use drag and drop in Vue
Using DND in Vue allows you to bind events directly to components.
The following contents are included:
- Use Vue to implement drag and drop
- Drag and drop events and when the event is triggered
- Some effect handling of drag-and-drop events
- Drag and drop system files into the browser
What can DnD do?
- Improve the operation and interaction experience on web pages
- Provides list sorting function
- Native interaction with the browser
- HTML 5 games
- . More and more
Recommend some good DnD libraries
- interact.js – JavaScript drag and drop, resizing and multi-touch gestures with inertia and snapping for modern browsers (and also IE9+)
- Sortable – Sortable — is a JavaScript library for reorderable drag-and-drop lists on Modern Browsers and touch devices.
- draggable – The JavaScript Drag & Drop library your grandparents warned you about.
- Vue.Draggable – Vue component allowing drag-and-drop sorting in sync with View-Model. Based on Sortable.js
- vue-grid-layout – A draggable and resizable grid layout, for Vue.js.
- vue-draggable-resizable – Vue2 Component for draggable and resizable elements.
- react-dnd – Drag and Drop for React
- react-beautiful-dnd – Beautiful and accessible drag and drop for lists with React
- react-grid-layout – A draggable and resizable grid layout with responsive breakpoints, for React.
reference
Mozilla HTML_Drag_and_Drop_API
Native HTML5 Drag and Drop
caniuse
Working with HTML5 Drag-and-Drop
Use Drag and Drop to improve the interactive experience for Web applications