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

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!

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.