How to use ondrag in html5
This article is about how to use ondrag in html5. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.
Example
In
Execute _ JavaScript when the element starts dragging:
In JavaScript:
Object.ondrag=function () {myScript}
In JavaScript, use the addEventListener () method:
Object.addEventListener ("drag", myScript)
Note: the addEventListener () method is not supported in Internet Explorer 8 and earlier IE versions.
Technical details
Whether to support bubbling: can Yes cancel: Yes event type: HTML tag supported by DragEvent: All HTML elements
More Instanc
Example
The following example demonstrates all drag and drop events:
/ * trigger when dragging * /
Document.addEventListener ("dragstart", function (event) {
/ / dataTransfer.setData () method sets the data type and the data dragged
Event.dataTransfer.setData ("Text", event.target.id)
/ / output some text when dragging the p element
Document.getElementById ("demo") [xss_clean] = "start dragging p element."
/ / modify the transparency of dragged elements
Event.target.style.opacity = "0.4"
});
/ / change the color of the output text while dragging the p element
Document.addEventListener ("drag", function (event) {
Document.getElementById ("demo") .style.color = "red"
});
/ / output some text elements and reset transparency after dragging p elements
Document.addEventListener ("dragend", function (event) {
Document.getElementById ("demo") [xss_clean] = "finish dragging p element"
Event.target.style.opacity = "1"
});
/ * trigger after dragging is completed * /
/ / when the p element is dragged into droptarget, change the border style of div
Document.addEventListener ("dragenter", function (event) {
If (event.target.className = = "droptarget") {
Event.target.style.border = "3px dotted red"
}
});
By default, data / elements cannot be dragged and dropped in other elements. For drop, we must prevent the default handling of elements
Document.addEventListener ("dragover", function (event) {
Event.preventDefault ()
});
/ / reset the border style of the droptarget when the draggable p element leaves the div
Document.addEventListener ("dragleave", function (event) {
If (event.target.className = = "droptarget") {
Event.target.style.border = ""
}
});
/ * for drop, prevent the browser from processing data by default (links are opened by default in drop)
Reset the color of the output text and the border color of the DIV
Using dataTransfer.getData () method to obtain drag and drop data
Towed data element id ("drag1")
Drag and drop elements to attach to drop elements * /
Document.addEventListener ("drop", function (event) {
Event.preventDefault ()
If (event.target.className = = "droptarget") {
Document.getElementById ("demo") .style.color = ""
Event.target.style.border = ""
Var data = event.dataTransfer.getData ("Text")
Event.target.appendChild (document.getElementById (data))
}
});
Thank you for reading! This is the end of the article on "how to use ondrag in html5". 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 for more people to see!
