Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "HTML5 drag and drop Drag method". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "HTML5 drag and drop Drag method" can help you solve the problem.

1. Basic JavaScript native implementation

The implementation of drag-and-drop behavior through native JavaScript code is very complex, you need to use mousedown, mousemove and mouseup events in the DOM event model, and you need to constantly obtain mouse coordinates and modify the coordinate location of elements, so performance will be a big problem. In addition, browser compatibility needs to be taken into account when implementing, and drag-and-drop behavior other than browser pages is not supported.

2. JavaScript library

JavaScript libraries such as jQuery provide encapsulated drag-and-drop processing, which solves the complexity and compatibility of JavaScript native implementation. However, these JavaScript libraries carry out complex calculation and processing in order to ensure compatibility, and use a lot of code, which causes the size of the library to be too large, affects the loading speed of the page and increases the network traffic.

Advantages of Drag & Drop API

Using Drag & Drop API can bring us the following benefits.

 enables browsers to natively support drag-and-drop behavior through events, so we no longer need to write complex JavaScript code or consider strange browser compatibility issues.

 's native replacement of JavaScript code also greatly reduces page size, allowing users to open pages faster and reduce bandwidth requests.

 provides a dataTransfer interface to store data, allowing us to define the effect of drag and drop, as well as custom drag and drop operations.

 supports drag-and-drop behavior outside the browser page, such as dragging and dropping a file from the desktop into the browser page, which was previously impossible.

Drag & the main operation of Drop API

Drag & Drop API mainly contains three aspects: events, properties and interfaces, which we will explain one by one.

1. Major event

The following are drag-and-drop related events, which are divided into 7 according to the drag-and-drop process.

 dragstart . The event at the beginning of dragging needs to be bound to the dragged object.

 drag . From the beginning of the dragstart to the end of the dragend, this event continues to occur while dragging, and needs to be bound to the dragged object.

 dragend . The event at the end of the drag needs to be bound to the drag object.

 dragenter . Events dragged into the current element area need to be bound to the object dragged by the dragged object.

 dragover . An event that is dragged to the area of the current element, which is constantly triggered during the drag process and needs to be bound to the object to which the dragged object is being dragged.

 dragleave . The event of dragging out the current element area needs to be bound to the object to which the dragged object has just been dragged.

 drop . The event that stops dragging in the current element area needs to be bound to the object on which the dragged object is placed.

A complete drag-and-drop event process is shown in the figure below, and we can easily use the above events to deal with complex drag-and-drop behavior.

A complete HTML5 drag-and-drop event process

two。 Related attribute

By default, img and a tags can be dragged and dropped. If other types of nodes also need to support dragging, you must add the attribute draggable= "true".

To make an element support dragging is actually very simple, first, to set the draggable attribute for this element, and second, to add a function to its dragstart event to handle the drag data.

Drag & Drop API also has a dropzone attribute that sets the file types and feedback methods allowed for placing the target area, such as move s:text/plain for showing the effect of data movement and accepting the placement of any text, copy f:image/png for showing the effect of data replication and accepting the placement of images in png format.

Therefore, for an element to allow other dragged elements to be placed on top of it, the element must have a dropzone attribute and listen for drop events (very similar to the two conditions that the above element supports dragging). However, we can also use custom event handling for placing elements instead of the dropzone attribute, which requires us to determine in the dragenter event whether the element supports placement and what feedback to display for the user in the dragover event.

3. Main interface

HTML5 uses the dataTransfer interface to support drag-and-drop data storage, which is generally used as event.dataTransfer. The dataTransfer object can be used not only to pass data, but also to specify the feedback effect of dragging and placing objects, which contains the following properties and methods.

 dataTransfer.effectAllowed [= value].

This property returns the feedback on the allowed dragging of the dragged object. When used as a method, the dropEffect property allowed when initializing the dragenter and dragover events

The values that can be set are shown in the following table, and the default value is uninitialized.

Value and description of the dropEffect attribute:

Value and description of the dropEffect attribute

This property can be set in the dragstart event handler of the dragged object, such as the following code example:

DragElement.ondragstart = function (e) {

Var dt = e.dataTransfer

Dt.effectAllowed = 'link'

}

 dataTransfer.dropEffect [= value].

This property returns the feedback effect of drag and drop that has been set.

As a method, you can set the feedback effect of dragging and dropping objects, including the following values: none, copy, link, and move, which represent four effects: dragging objects cannot be placed here, dragged objects are moved to placement objects, dragged objects are copied to placement objects, and dragged objects are linked to placement objects.

These four effects are shown in different mouse shapes, as shown in figure 3-5 below.

Different mouse shapes

The setting of dropEffect can be handled in the dragenter or dragover event handler where the object is placed, as shown in the following code.

DropElement.ondragover = function (e) {

Var dt = e.dataTransfer

Dt.dropEffect = 'link'

E.preventDefault ()

}

In addition, if the effect does not match the effect-Allowed effect originally set, the drag-and-drop operation will fail.

 dataTransfer.items . Returns a DataTransferItemList object about dragging data.

 dataTransfer.setDragImage (element, x, y). Specify the picture to move with the mouse as you drag the element, where x and y are the Abscissa and ordinate relative to the mouse, respectively.

 dataTransfer.addElement (element). Add elements to the dragged list. You can use this method if you want an element to be dragged along with the dragged element.

 dataTransfer.types . Returns the format in which data is stored for the element when the dragstart event is triggered. If it is a drag of the system file, return files.

 dataTransfer.setData (format, data). Add data to the element, which you can use to store data for the dragged element when the dragstart event is triggered. There are generally two data formats for setData: text/plain (set format to string text, mainly used for text data) and text/uri-list (set format to string url, mainly used for url).

 data=dataTransfer.getData (format). Returns the stored data. If the data does not exist, an empty string is returned.

 dataTransfer.clearData ([format]). Deletes data in the specified format. If you do not specify a format, all data is deleted.

 dataTransfer.files . If you are dragging a system file, return the file list object that is being dragged. You can use it to get the file data you dragged.

The properties and methods provided by the dataTransfer object make it possible to customize the handling of drag-and-drop operations.

File drag and drop upload instance

The following code listing is an example of JavaScript code that demonstrates how to drag and drop one element onto another and change the state in which the target element is placed when the mouse is down.

Var dragElement = document.getElementById ('drag-element')

Var dropElement = document.getElementById ('drop-element')

DragElement.setAttribute ('draggable',' true'); / / allows dragElement elements to be dragged

DragElement.ondragstart = function (e) {

Var dt = e.dataTransfer

Dt.effectAllowed = 'link'; / / set the feedback effect to link form

}

DropElement.ondragover = function (e) {

E.preventDefault ()

}

DropElement.ondrop = function () {

DropElement [XSS _ clean] = 'drag end'; / / change the state in which the target element is placed

}

DropElement.ondragenter = function (e) {

Var dt = e.dataTransfer

Dt.dropEffect = 'link'

E.preventDefault ()

}

A possible mistake.

When creating a drag-and-drop event listener, be sure to prevent the default behavior, especially if you execute preventDefault () in the dragover event, otherwise the drop event will not be triggered and the dropEffect will not take effect.

Here is the correct code:

DropElement.addEventListener ('dragover', function (e) {

E.preventDefault ()

}, false)

Note that the default behavior cannot be blocked in the dragstart event, otherwise the drag behavior will not occur.

This is the end of the introduction on "HTML5 drag and drop Drag method". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.