Use Drag and Drop to improve the interactive experience for Web applications

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

Drop 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
• indragoverUsed in eventsevent.preventDefault()Fires correctly when the default event behavior is blockeddropThe event
• Use when drop is triggered in the Firefox browserevent.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

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 definingMIME(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