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
  • 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

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

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