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

This article mainly shows you "how to use HTML5+CSS3 to achieve drag-and-drop function", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to use HTML5+CSS3 to achieve drag-and-drop function" this article.

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:

# 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.

The above is all the content of the article "how to use HTML5+CSS3 to implement drag-and-drop function". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.