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

This article mainly explains "how to achieve a drag-and-drop effect in HTML5". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn how to achieve a drag-and-drop effect in HTML5.

Let's take a look at the core code of html:

The code is as follows:

Drag the small yellow square into the big red box

The draggable property is a new addition to html5, which has three values of true,false,auto. True can be dragged, false is not allowed, and auto depends on whether the user's browser supports it or not. For more information, please refer to the official documentation.

Add a little style:

The code is as follows:

# drop

{

Width: 300px

Height: 200px

Background-color: # ff0000

Padding: 5px

Border: 2px solid # 000000

}

# item

{

Width: 100px

Height: 100px

Background-color: # ffff00

Padding: 5px

Margin: 20px

Border: 1px dashed # 000000

}

* [draggable=true] {

-moz-user-select:none

-khtml-user-drag: element

Cursor: move

}

*:-khtml-drag {

Background-color: rgba (238, 238, 0.5)

}

Then let's take a look at javascript:

The code is as follows:

Function listenEvent (eventTarget, eventType, eventHandler) {

If (eventTarget.addEventListener) {

EventTarget.addEventListener (eventType, eventHandler,false)

} else if (eventTarget.attachEvent) {

EventType = "on" + eventType

EventTarget.attachEvent (eventType, eventHandler)

} else {

EventTarget ["on" + eventType] = eventHandler

}

}

/ / cancel event

Function cancelEvent (event) {

If (event.preventDefault) {

Event.preventDefault ()

} else {

Event.returnValue = false

}

}

/ / cancel propagation

Function cancelPropagation (event) {

If (event.stopPropagation) {

Event.stopPropagation ()

} else {

Event.cancelBubble = true

}

}

_ window.onload=function () {

Var target = document.getElementById ("drop")

ListenEvent (target, "dragenter", cancelEvent)

ListenEvent (target, "dragover", dragOver)

ListenEvent (target, "drop", function (evt) {

CancelPropagation (evt)

Evt = evt | | window.event

Evt.dataTransfer.dropEffect = 'copy'

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

Target.appendChild (document.getElementById (id))

});

Var item = document.getElementById ("item")

Item.setAttribute ("draggable", "true")

ListenEvent (item, "dragstart", function (evt) {

Evt = evt | | window.event

Evt.dataTransfer.effectAllowed = 'copy'

Evt.dataTransfer.setData ("Text", item.id)

});

}

Function dragOver (evt) {

If (evt.preventDefault) evt.preventDefault ()

Evt = evt | | window.event

Evt.dataTransfer.dropEffect = 'copy'

Return false

}

From the above code, let's look at the following using a set of drag-and-drop Events provided by HTML5:

Dragstart

Drag event starts.

Drag

During the drag operation.

Dragenter

Drag is over the target; used to determine if target will accept drop.

Dragover

Drag is over target; used to determine feedback to user.

Drop

Drop occurs.

Dragleave

Drag leaves target.

Dragend

Drag operation ends.

Thank you for reading, the above is the content of "how to achieve a drag-and-drop effect in HTML5". After the study of this article, I believe you have a deeper understanding of how to achieve a drag-and-drop effect in HTML5. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.