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

This article focuses on "HTML5 drag related knowledge points", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "HTML5 drag related knowledge points" it!

Drag related attribut

The draggable attribute is a global attribute of html5 and is one of the ways that html5 supports drag-and-drop operations. It is used to indicate whether an element can be dragged and dropped. Draggable has three values, true indicates that it can be dragged and dropped, false indicates that it cannot be dragged and dropped, and auto indicates that the default value of the browser is used.

XML/HTML Code copies content to the clipboard

Listing 1

Listing 2

Listing 3

Listing 4

Listing 5

Listing 6

Drag related events

Ondragstart: this event triggers ondrag when the user starts dragging the element or selects text: triggers ondragend when the element is dragging: triggers ondragleave when the user finishes dragging the element: triggers ondragover when the object dragged by the mouse leaves its container scope: this event is triggered when a dragged object is dragged within the scope of another object container, this event occurs on the target element ondrop: triggered when the mouse is released during a drag process This event acts on the target element

DataTransfer object related methods

SetData (format,data): add custom data format getData (format): get custom data format clearData ([format]): clear custom data formats and data

Event.preventDefault ()

This method is the default behavior of blocking events. PreventDefault () must be executed in ondragover, otherwise the ondrop event will not be triggered.

Implementation case:

XML/HTML Code copies content to the clipboard

.main {

Width: 800px

/ * border: 1px solid # ccc;*/

Height: 400px

Margin:0 auto

}

.left {

Float: left

Width: 25%

Background-color: # 666

Height: 370px

Text-align: center

Color: black

Padding-top:30px

Font-size: 110px

}

.right {

Float: right

Width: 69%

}

.right ul,.right li {

Margin: 0

Padding: 0

}

.right li {

List-style: none

Border: 2px dashed # 666

Background-color: # ddd

Height: 60px

Margin-top: 3px

Text-indent: 30px

Line-height: 60px

}

.right li:hover {

Background-color: # ccc

}

# message {

Width: 800px

Text-align: center

Border: 1px solid black

Margin: 20px auto

Font-size:28px

}

_ window.onload = function () {

Var aLi = document.getElementsByTagName ('li')

Var oLeft = document.getElementsByClassName ('left') [0]

Var oMessage = document.getElementById ('message')

For (var iTuno Bandi)

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.