How to realize a drag and drop effect in HTML5
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!
