Shulou(Shulou.com)05/31 Report--

This article mainly introduces "HTML5 drag-and-drop API how to achieve drag-and-drop sorting function". In daily operation, I believe that many people have doubts about how to achieve drag-and-drop sorting function in HTML5 drag-and-drop API. Xiaobian consulted all kinds of data and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the question of "HTML5 drag-and-drop API how to achieve drag-and-drop sorting function". Next, please follow the editor to study!

Preface

Direct drag-and-drop API is provided in HTML5, which is very convenient for us to achieve drag-and-drop effect. You don't need to write a lot of js, you only need to listen to the drag-and-drop events of elements to achieve various drag-and-drop functions.

If you want to drag and drop an element, you must set the draggable attribute of the element to true. When the attribute is false, drag and drop is not allowed. Both the img element and the an element set the draggable attribute to true by default, which can be dragged and dropped directly. If you don't want to drag and drop these two elements, set the attribute to false.

Drag and drop event

Drag-and-drop events are generated by different elements. When an element is dragged and dropped, it may pass through many elements and finally reach the element you want to place. Here, I temporarily call the element that is dragged and dropped the source object, the element that passes by as the process object, and the element that arrives as the target object. Different objects produce different drag-and-drop events.

Source object:

Dragstart: the source object starts dragging and dropping.

Drag: the source object is being dragged and dropped.

Dragend: end of drag-and-drop of source object.

Process object:

Dragenter: the source object begins to enter the scope of the process object.

Dragover: the source object moves within the scope of the procedure object.

Dragleave: the source object is out of scope of the process object.

Target object:

Drop: the source object is dragged and dropped into the target object.

An element b element c element var source = document.getElementById ('source'), / / an element process = document.getElementById (' process'), / / b element target = document.getElementById ('target'); / / c element source.addEventListener (' dragstart',function (ev) {/ / dragstart event produces console.log from element a ('an element begins to be dragged') }, false) process.addEventListener ('dragenter',function (ev) {/ / dragenter event generates console.log from b element (' an element starts to enter b element');}, false) process.addEventListener ('dragleave',function (ev) {/ / dragleave event generates console.log from b element (' an element leaves b element') }, false) target.addEventListener ('drop',function (ev) {/ / drop event generates console.log from c element (' an element dragged and dropped to c element'); ev.preventDefault ();}, false) _ document.ondragover = function (e) {e.preventDefault ();}

DataTransfer object

A data transfer object, dataTransfer, is provided in all drag-and-drop events to pass data between the source and target objects. Next, take a look at the methods and properties of this object to see how it passes data.

SetData ()

This method stores data into the dataTransfer object. Receive two parameters, the first of which represents a string to be stored in the type of data, which is now supported as follows:

Text/plain: text text.

Text/html:HTML text.

Text/xml:XML text.

List of text/uri-list:URL, one line for each URL.

The second parameter is the data to be stored. For example:

Event.dataTransfer.setData ('text/plain','Hello World')

GetData ()

This method reads data from the dataTransfer object. Parameter is the type of data specified in setData. For example:

Event.dataTransfer.getData ('text/plain')

ClearData ()

This method clears the data stored in the dataTransfer object. The parameter is optional, which is the data type. If the parameter is empty, all kinds of data are cleared. For example:

Event.dataTransfer.clearData ()

SetDragImage ()

This method sets the drag and drop icon by using the img element. Three parameters are received, the first is the icon element, the second is the X-axis displacement of the icon element from the mouse pointer, and the third is the Y-axis displacement of the icon element from the mouse pointer. For example:

Var source = document.getElementById ('source'), icon = document.createElement (' img'); icon.src = 'img.png';source.addEventListener (' dragstart',function (ev) {ev.dataTransfer.setDragImage (icon,-10,-10)}, false)

EffectAllowed and dropEffect properties

These two properties are combined to set the visual effect of drag and drop.

It is worth noting that IE does not support dataTransfer objects. Yes, no matter which version of IE does not support it.

Implement drag-and-drop sorting

Now that you are familiar with the use of drag-and-drop API, let's implement a simple drag-and-drop sorting, which is also common in projects. Let's first sort out the train of thought:

In a list, each element can be dragged and dropped, so first set the draggable attribute to true for each element.

Listen for the dragstart event of each element and style the source object to distinguish it.

Listen for the dragenter event of each element, and when the source object enters the current element, the source object is added before that element. In this way, the following elements will be squeezed out by the source object, achieving the effect of sorting.

However, you will find that the source object can not be ranked last, only in the penultimate second. This is the time to listen for the dragleave event. When the procedure object is the last element, the source object leaves the procedure object, and the source object is added to the last.

The main code is as follows:

Var source = document.querySelectorAll ('.list'), dragElement = null;for (var I = 0; I < source.length; iTunes +) {source[ I] .addEventListener ('dragstart',function (ev) {dragElement = this;}, false); source[ I] .addEventListener (' dragenter', function (ev) {if (dragElement! = this) {thisxss _ clean] .insertBefore (dragElement,this) }, false) source[ I] .addEventListener ('dragleave', function (ev) {if (dragElement! = this) {if (this = = this [XSS _ clean]. LastElementChild | | this = = this [XSS _ clean] .lastChild) {th [XSS _ clean] .appendChild (dragElement);}}, false)}; _ document.ondragover = function (e) {e.preventDefault () } _ document.ondrop = function (e) {e.preventDefault ();}

Complete code address: drag-demo

Compatible

The main reason is that the compatibility in IE is not very good, but at least it is compatible with the drag sorting above in IE10.

And in my simple experiment, I found that the dragleave event is not triggered when the element in IE does not set height.

A more important point is that ios and Android are completely incompatible. Fortunately, there is a plug-in that makes it perfectly compatible on mobile.

Plug-in address: ios-html5-drag-drop-shim

You only need to introduce the plug-in into the original code to drag on the mobile side.

Var iosDragDropShim = {enableEnterLeave: true} at this point, the study on "HTML5 drag-and-drop API how to implement drag-and-drop sorting function" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.