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

This article is about how to achieve drag-and-drop effects in HTML5 without using javascript. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

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

Drag the small yellow square into the big red box

The draggable property is newly added to HTML5/ "> html5, which has three values true,false,auto. True can be dragged, false is not allowed, and auto depends on whether the user's browser supports it or not.

Add a little style:

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

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.

Related events are defined to achieve the desired function. The Js on it is not difficult to read.

You can try it yourself, Opera support is the best at present, IE effect is not good.

Thank you for reading! On "how to achieve drag-and-drop effect in HTML5 without the help of javascript" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, you can share it out for more people to see it!

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.