HTML5 drag and drop API to implement example code for drag and drop sorting

HTML5 provides a direct drag -and -drop API, which is greatly convenient for us to achieve the drag and drop effect. We do not need to write a lot of JS. You only need to listen to the drag and drop event of the element to achieve various drag and drop function.

If you want to drag and drop a certain element, you must set the Draggable property of the element to True. When the attribute is false, drag and drop will not be allowed. The IMG elements and A elements are set with Draggable attributes to TRUE, which can be directly dragged and dropped. If you don't want to drag and drop these two elements, set the attribute to False.

Drag and drop incidents are generated by different elements. A element is dragged and dropped, and he may eventually reach the element he wants to place on many elements. Here, I temporarily refer to the element of the dragging and drop and the element of the process, and the element I reached is called the target object. Different objects have different drag and drop events.

Source object:

1. Dragstart: The source object begins to drag and drop.
2. Drag: During the drag and drop of the source object.
3. Dragend: The source object drag and drops.

Process object:

1. Dragenter: Source objects begin to enter the range of the process.
2. Dragover: The source object moves within the range of the process.
3. Dragleave: The scope of the object of the source leaving the process.

Target object:

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

 <div ID = Source Draggable = True> A Element </DIV> <DIV ID = PROCESS> B Element </DIV> <DIV ID = TARGET> C Element </DIV> <Script> VAR Source = Document.GetelementByid '(' Source '), // a element proces = document.GetelementByid (' Process'), // B Element Target = DOCUMENT.GELEMENTBYID ('Target'); // STENER ('Dragstart', Function (EV) {// Dragstart events are generated by the A element to generate console.log ('A element starts to be dragged');}, false) proces.addeventristener ('dragner', function (EV) {// Dragenter event is generated by the B element. Log ('A element starts to enter element');}, false) proces.addeventristener ('dragLeave', function (EV) {//dragleave incident by the B element ('A element leaves B element'); }, FALSE) Target.addeventListener ('Drop', Function (EV) {// Drop event is generated by console.log ('A A element to C element'); ) Document.ondragover = Function (e) {e.PreventdeFault ();} </script>

A data transmission object Datatransfer is provided in all drag -and -drop events to pass data between source objects and target objects. Next, get to know the methods and attributes of this object to understand how it transmits data.

This method is stored in the Datatransfer object. Receive two parameters, the first one indicates a string to store the type of data, and now supports the following:

1. text/plain: text text.
2. text/html: html text.
3. text/xml: xml text.
4. Text/Uri-List: URL list, each url is one line.

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

 event.datatransfer.setdata ('text/plain', 'hello world');

This method reads data from the Datatransfer object. The parameter is the type of data specified in setdata. For example:

 event.datatransfer.getdata ('text/plain');

This method removes the data stored in the Datatransfer object. Parameters are optional, for data types. If the parameters are empty, clear all types of data. For example:

 event.datatransfer.cleardata ();

This method is set to drag and drop icons by using IMG elements. Receive the 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'; Start ', Function (EV) {EV.DATATRANSFER. setdragimage (icon, -10, -10)}, false)

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

It is worth noting that IE does not support the Datatransfer object. Yes, no matter which IE version is supported.

The use of drag and drop APIs is already familiar with the above. Let's take a look at the idea first:

1. In one list, each element can be dragged and dropped, and the Draggable property is set to TRUE for each element.
2. Surveying the Dragstart event of each element to distinguish the style of the source object.
3. When monitoring the Dragenter event of each element, when the source object enters the current element, the source object is added before the element. In this way, the elements behind it will be squeezed down by the source object, achieving the sorting effect.
4. However, it will be found that the source object cannot be ranked to the last one, and can only be the second in the penultimate. At this time, the Dragleave event is monitored. When the process object is the last element, the source object leaves the process object, and then add the source object to the end.

The main code is as follows:

 var source = document.queryselectiverall ('. List'), DRAGELEMENT = NULL; for (var I = 0; I <Source.Length; I ++) {Source [i] .adDeventListener ('DRAGSTAR t ', function (EV) {dragelement = this;}, false); source [i] .addeventListener ('Dragenter', Function (EV) {if (DRAGELEMENT! = This) {This.parentnodefore (DRAGELEMELEMEMEMEMERMEMERMEREMEREMEREMER, this);}}, false) source [ i] .adDeventListener ('Dragleave', Function (EV) {if (DRAGELEMENT! = This) {if (this == This.parentNode.lastelementChildChild || This.parentnod e.lastchild) {this.parentNode.appendchild ( dragelement);}}, false)}; document.ondragover = function (e) {e.preventDefault (); }

Full code address: Drag-Demo

It is mainly compatible in IE, but at least it can be dragged and sorted in at least in IE10.

And in my simple test, it is found that when the elements are not set in IE, the Dragleave event will not be triggered.

The more important point is on iOS and Android, which is completely incompatible. Fortunately, there is a plug -in to make it perfectly compatible on the mobile end.

Plug-in address: iOS-HTML5-DRAG-Drop-Shim

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

 <script> var IOSDRAGDROPSHIM = {EnableNERLAVE: TRUE} </script> <script src = Vendor/iOS-DROP.JS> </Script>

The above is all the contents of this article. I hope it will be helpful to everyone's learning. I also hope that everyone will support VEVB Wulin.com.