HTML5 drag-and-drop API to implement drag-and-drop sorting of instance code, html5api

HTML5 drag-and-drop API to implement drag-and-drop sorting of instance code, html5api

Preface

HTML5 provides a direct drag-and-drop API, which greatly facilitates the implementation of drag-and-drop effects. You do not need to write a lot of JavaScript code. You only need to monitor the drag-and-drop events of elements to implement various drag-and-drop functions.

To drag and drop an element, you must set the draggable attribute of the element to true. If this attribute is false, drag and drop is not allowed. The draggable attribute is set to true by default for both img and a elements. You can drag and drop them directly. If you do not want to drag and drop these two elements, set the attribute to false.

Drag and drop events

Drag and drop events are generated by different elements. If an element is dragged and dropped, it may pass through many elements and eventually reach the element to be placed. Here, I temporarily call the drag-and-drop element as the source object, the element that passes through is called the process object, and the element that arrives is called the target object. Different objects generate different drag-and-drop events.

Source object:

1. Dragstart: drag and drop the source object.
2. Drag: the source object is being dragged and dropped.
3. Dragend: drag and drop the source object to end.

Process object:

1. Dragenter: the source object starts to enter the scope of the process object.
2. Dragover: the source object moves within the scope of the process object.
3. Dragleave: the source object is out of the scope of the process object.

Target object:

1. Drop: the source object is dragged to the target object.

<Div id = "source" draggable = "true"> element a </div> <div id = "process"> element B </div> <div id = "target"> c element </div> <script> var source = document. getElementById ('source'), // a element process = document. getElementById ('process'), // B element target = document. getElementById ('target'); // c element source. addEventListener ('dragstart', function (ev) {// The dragstart event is generated by element. log ('a element starts to be dragged ');}, false) process. addEventListener ('dragenter', function (ev) {// The dragenter event is generated by Element B. log (''a element begins to enter 'B');}, false) process. addEventListener ('dragleave ', function (ev) {// The dragleave event is generated by Element B. log ('a element leaves B ');}, false) target. addEventListener ('drop', function (ev) {// The drop event is generated by the c element. log ('a element dragged to c '); ev. preventDefault () ;}, false) document. ondragover = function (e) {e. preventDefault () ;}</script>

DataTransfer object

A data transfer object dataTransfer is provided in all drag-and-drop events to transfer data between the source object and the target object. Next, let's take a look at the methods and attributes of this object to learn how it transmits data.

SetData ()

This method saves data to the dataTransfer object. Receives two parameters. The first string indicates the type of data to be saved. The following types of parameters are supported:

1. Text/plain: text.
2. Text/html: HTML text.
3. Text/xml: XML text.
4. Text/uri-list: URL list. Each URL is a line.

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

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

GetData ()

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

event.dataTransfer.getData('text/plain');

ClearData ()

This method clears the data stored in the dataTransfer object. Optional. It is a data type. If the parameter is null, all types of data are cleared. For example:

event.dataTransfer.clearData();

SetDragImage ()

This method uses the img element to set the drag-and-drop icon. Receive three parameters, 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 attributes

These two attributes 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 IE version is supported.

Implement drag-and-drop sorting

We are familiar with the use of drag-and-drop APIs. We can implement simple drag-and-drop sorting, which is also common in projects. Let's take a look at the following ideas:

1. In a list, each element can be dragged and dropped. First, set the draggable attribute to true for each element.
2. Listen to the dragstart event of each element and perform style processing on the source object to differentiate it.
3. Listen to the dragenter event of each element. When the source object enters the current element, add the source object to the element. In this way, the elements after the sorting will be squeezed by the source object, achieving the sorting effect.
4. However, you will find that the source object cannot be exceeded to the last one, and it can only be the second to the last. At this time, you need to listen to the dragleave event. When the process object is the last element, the source object leaves the process object, and then the source object is added to the end.

The main code is as follows:

var source = document.querySelectorAll('.list'),    dragElement = null;for(var i = 0; i < source.length; i++){    source[i].addEventListener('dragstart',function(ev){        dragElement = this;    },false);    source[i].addEventListener('dragenter', function(ev){        if(dragElement != this){            this.parentNode.insertBefore(dragElement,this);        }    }, false)    source[i].addEventListener('dragleave', function(ev){        if(dragElement != this){            if(this == this.parentNode.lastElementChild || this == this.parentNode.lastChild){                this.parentNode.appendChild(dragElement);            }        }    }, false)};document.ondragover = function(e){e.preventDefault();}document.ondrop = function(e){e.preventDefault();}

Complete Code address: drag-demo

Compatible

The Compatibility in IE is not good, but at least in IE10 can be compatible with the above drag sorting.

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

More importantly, it is completely incompatible with ios and Android. But fortunately, there is a plug-in that can make it perfectly compatible on the Mobile End.

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

You only need to introduce this plug-in the original code to implement drag on the mobile terminal.

<script>var iosDragDropShim = { enableEnterLeave: true }</script><script src="vendor/ios-drag-drop.js"></script>

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.