Shulou(Shulou.com)06/03 Report--

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

This article briefly introduces the drag-and-drop implementation of HTML5.

Drag and drop (Drag and drop) is part of the HTML5 standard.

Browser support: Internet Explorer 9, Firefox, Opera 12, Chrome and Safari 5 support drag and drop.

Dragged element, dragElement:

(1) add event: ondragstart

(2) add attribute: dragable

Place the element, dropElement:

1. Add events: ondargenter, ondragover, ondragleave, ondragend, ondrop

Events that fall into the same category as mouser are very similar and literally easy to understand. I will not repeat them, but I will use examples to illustrate them below.

2. Drag and drop between elements on the page

Let's use a small example, drag and drop between div, to show how each event is triggered:

The code is as follows:

# dropEle

Div

{

Float: left

}

/ * *

* drag and drop (Drag and drop) is part of the HTML5 standard.

* browser support

* Internet Explorer 9, Firefox, Opera 12, Chrome, and Safari 5 support drag and drop.

, /

$(function ()

{

$("# dragEle") [0] .ondragstart = function (event)

{

Console.log ("dragStart")

Event.dataTransfer.setData ("Text", event.target.id)

}

/ * *

* the drop event occurs when the dragged data is placed.

* call preventDefault () to avoid the browser's default handling of data (the default behavior of the drop event is to open as a link)

* @ param event

, /

$("# dropEle") [0] .ondrop = function (event)

{

/ * for (var p in event.dataTransfer)

{

Console.log (p + "=" + event.dataTransfer [p] + "@ @")

}

, /

Console.log ("onDrop")

Var id = event.dataTransfer.getData ("Text")

$(this) .append ($("#" + id) .clone () .text ($(this) .find ("div") .length))

Event.preventDefault ()

}

/ * *

* the ondragover event specifies where to place the dragged data.

* by default, data / elements cannot be placed in other elements. If we need to set allow placement, we must block the default handling of the element.

, /

$("# dropEle") [0] .ondragover = function (event)

{

Console.log ("onDrop over")

Event.preventDefault ()

}

$("# dropEle") [0] .ondragenter = function (event)

{

Console.log ("onDrop enter")

}

$("# dropEle") [0] .ondragleave = function (event)

{

Console.log ("onDrop leave")

}

$("# dropEle") [0] .ondragend = function (event)

{

Console.log ("onDrop end")

}

});

One or more files selected in the system are dragged into the div, and the information of the dragged files will be stored in the files. Then we can get the type, length and content of the files through file and upload them.

3. SetDragImage (image, x, y) is used to set the effect of moving with the mouse during the movement of the mouse. Must be set in dragstart.

4. Types,effectAllowed and dropEffect are the types of dragged elements and the style displayed by the mouse during the drag and drop process, but these attributes can usually be ignored and are generally not needed.

At this point, the study on "how to use HTML5+CSS3 to achieve drag-and-drop 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.