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

In this article, the editor introduces in detail "how to drag and drop API by HTML5". The content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to drag and drop API by HTML5" can help you solve your doubts.

First, about dragging API

Drag-and-drop API is a new feature of HTML5. Compared with other new features, it accounts for 60% of the importance and 30% of the actual development. Learning is required to reach the level of mastery.

What is drag and release?

Drag and drop: Drag

Release: Drop

Drag and drop means that the mouse clicks on the source object and does not let go of the object, but it is released as soon as it is released.

What are the source object and the target object?

Source object: refers to something we click with the mouse, which can be a picture, a DIV, a piece of text, and so on.

Target object: it means that we drag the source object and move it to an area, where the source object can enter, hover over this area (without letting go), release and place the source object here (already released), or you can hover and leave the area.

4. Drag and drop the related functions of API

After explaining what the source object and target object are, we return to the drag-and-drop API in the front end, and we can derive several functions from the above operation

Events that can be triggered by the dragged source object:

(1) ondragstart: the source object starts to be dragged

(2) ondrag: while the source object is being dragged (the mouse may or may not be moved)

(3) ondragend: the source object is dragged to end

Drag the source object to enter events that can be triggered by the target object above:

(1) ondragenter: the target object is dragged by the source object into

(2) ondragover: the target object is dragged by the source object and hovered over it

(3) ondragleave: the source object is dragged away from the target object

(4) ondrop: the source object drags over the target object to release / let go

Drag and drop API is a total of 7 functions!

How to transfer data between the dragged source object event and the target object event

HTML5 provides a new property for all drag-related events:

E.dataTransfer {} / / data transfer object

Function: for passing data between events of the source object and the target object

Save data in event handling on the source object:

E.dataTransfer.setData (k, v); / / KMurv must all be of type string

Read data in event handling on the target object:

Var v = e.dataTransfer.getData (k)

Example 1: implement a small plane that can move as the mouse drags

Tip: the aircraft needs absolute positioning! Get the coordinate values of the mouse in the ondrag event!

The code is as follows:

Body {margin:0; position: relative;} img {position:absolute;} A small plane that moves with the drag of the mouse

P3.ondragstart=function (e) {console.log ('event source p3 starts dragging'); / / record the mouse offset on the plane offsetX= e.offsetX; offsetY= e.offsetY;} p3.ondrag=function (e) {console.log ('event source p3 drag'); var x = e.pageX; var y = e.pageY Console.log; / / at the last moment of the drag event, the coordinates of the mouse could not be read, and both pageX and pageY became 0 if (x = zero & & y = zero) {return; / / did not handle the situation where both X and Y were zero at the last moment of dragging. P3.ondragend=function () {console.log ('end of source object p3 dragging');}

The effect is as follows:

Example 2:

Simulate the effect of the "trash can" in the computer, showing a total of three small planes. After dragging a small plane to the top of the trash can, the small plane is deleted from the DOM tree.

Tip: to delete the element from the Dom child node, you need to block the default behavior of ondragover! Use the data transfer of the source object and the target object to record the ID value of the small plane!

Important information:

Ondragover has a default behavior! That is, when ondragover triggers, ondrop will fail! This may be a problem with the version of the browser, which may only be solved if the browser is constantly updated in the future!

How to stop it?

Ondragover= function (e) {/ / e.preventDefault () when the source object hovers over the target object; / / blocks the default behavior so that drop can trigger.} ondrop= function (e) {/ / the source object is released in the target object.}

The code is as follows:

Body {text-align: center;} # trash {opacity: .2; margin: 15px;} drag the plane to the trash can and delete child elements from the DOM tree

/ / add event listeners to the source object-record which source object var srcList = document.querySelectorAll ('.src') was dragged; / / find all img elements for (var item0; I)

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.