How to use ondragstart in html5

This article mainly shows you "how to use ondragstart in html5", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to use ondragstart in html5" this article.

Example

Before the user starts dragging

Execute _ JavaScript when the element is called:

In JavaScript:

Object.ondragstart=function () {myScript}

In JavaScript, use the addEventListener () method:

Object.addEventListener ("dragstart", 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 * / document.addEventListener ("dragstart", function (event) {/ / dataTransfer.setData () method to set the data type and drag data event.dataTransfer.setData ("Text", event.target.id) when dragging; / / output some text document.getElementById ("demo") [xss_clean] = "start dragging p element." / / modify the transparency of the drag element event.target.style.opacity = "0.4";}); / / change the color of the output text document.addEventListener ("drag", function (event) {document.getElementById ("demo"). Style.color = "red";}) while dragging the p element / output some text elements after dragging p elements and reset transparency document.addEventListener ("dragend", function (event) {document.getElementById ("demo") [xss_clean] = "finish dragging p elements"; event.target.style.opacity = "1";}) / * triggered after dragging is completed * / / when p element finishes dragging 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 ();}); / / when the draggable p element leaves droptarget, reset the border style document.addEventListener of div ("dragleave", function (event) {if (event.target.className = = "droptarget") {event.target.style.border = "";}}) / * for drop, prevent the browser's default processing of data (links are turned on by default in drop) to reset the color of the output text and the border color of DIV using the dataTransfer.getData () method to obtain the drag-and-drop data element id ("drag1") drag element attached to the drop element * / 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));}}). This is all the content of the article "how to use ondragstart in html5". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!