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

This article mainly explains "how to use the HTML5 drag-and-drop function". Friends who are interested may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor learn how to use the HTML5 drag-and-drop function.

Drag and drop element

The HTML5 drag-and-drop feature allows users to drag and drop elements to another location. The placement location may be another application. When you drag an element, the mouse pointer follows the translucent representation of the element.

Let's try the following example to understand how it works:

Try this code for example »

Using Drag and Drop

Function dragStart (e) {

/ / Sets the operation allowed for a drag source

E.dataTransfer.effectAllowed = "move"

/ / Sets the value and type of the dragged data

E.dataTransfer.setData ("Text", e.target.getAttribute ("id"))

}

Function dragOver (e) {

/ / Prevent the browser default handling of the data

E.preventDefault ()

E.stopPropagation ()

}

Function drop (e) {

/ / Cancel this event for everyone else

E.stopPropagation ()

E.preventDefault ()

/ / Retrieve the dragged data by type

Var data = e.dataTransfer.getData ("Text")

/ / Append image to the drop box

E.target.appendChild (document.getElementById (data))

}

# dropBox {

Width: 300px

Height: 300px

Border: 5px dashed gray

Background: lightyellow

Text-align: center

Margin: 20px 0

Color: orange

}

# dropBox img {

Margin: 25px

}

Drag and Drop Demo

Drag and drop the image into the drop box:

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.