This article describes how to drag html elements in html5. To implement drag-and-drop before html5, you need to use js. Now html5 supports the drag-and-drop function internally, however, to implement a slightly complex function, JavaScript is indispensable. The content in this article is about how to implement the html element drag function in html5. To implement drag-and-drop before html5, you need to use js. Now html5 supports the drag-and-drop function, but to implement a slightly complex function, you still need the help of js. Here are several examples.
1. Create a drag object
We can use the draggable attribute to tell the browser which elements need to be dragged. Draggable has three values: true: the element can be dragged; false: the element cannot be dragged; auto: the browser determines whether the element can be dragged.
The default value is auto, but the browser's support for drag-and-drop functions for different elements varies with auto. For example, img objects and p objects are not supported. Therefore, if you need to drag an element, you 'd better set draggale to true. Here is an example:
The Code is as follows:
Example
Drop here
Script
Var src = document. getElementById ("src ");
Var target = document. getElementById ("target ");
Script
Running effect:
2. process drag events
Now let's take a look at drag-and-drop events. There are two types of events, one is the drag-and-drop object event, and the other is the advertising area event. Drag events include: dragstart: triggered when an element is dragged; drag: triggered when the element is dragged; dragend: triggered when the element is dragged. The following is an example:
The Code is as follows:
Example
Drop here
Script
Var src = document. getElementById ("src ");
Var target = document. getElementById ("target ");
Var msg = document. getElementById ("msg ");
Src. ondragstart = function (e ){
E.tar get. classList. add ("dragged ");
}
Src. ondragend = function (e ){
E.tar get. classList. remove ("dragged ");
Msg. innerHTML = "drop here ";
}
Src. ondrag = function (e ){
Msg. innerHTML = e.tar get. id;
}
Script
Running effect:
3. Create a serving area
Let's look at the events related to the serving area: dragenter: triggered when the drag object enters the serving area; dragover: triggered when the drag object moves in the serving area; dragleave: The drag object is not delivered to the serving area, triggered when you leave the serving area; drop: triggered when you drag an object to the serving area.
Let's look at an example:
The Code is as follows:
Example
Drop here
Script
Var src = document. getElementById ("src ");
Var target = document. getElementById ("target ");
Var msg = document. getElementById ("msg ");
Var draggedID;
Target. ondragenter = handleDrag;
Target. ondragover = handleDrag;
Function handleDrag (e ){
E. preventDefault ();
}
Target. ondrop = function (e ){
Var newElem = document. getElementById (draggedID). cloneNode (false );
Target. innerHTML = "";
Target. appendChild (newElem );
E. preventDefault ();
}
Src. ondragstart = function (e ){
DraggedID = e.tar get. id;
E.tar get. classList. add ("dragged ");
}
Src. ondragend = function (e ){
Var elems = document. querySelectorAll (". dragged ");
For (var I = 0; I <elems. length; I ++ ){
Elems [I]. classList. remove ("dragged ");
}
}
Script
Running result:
4. Use DataTransfer
We use DataTransfer to transmit data from the drag object to the serving area. DataTransfer has the following attributes and Methods: types: returned data format; getData (
