How to use ondragover in html5

This article mainly introduces how to use ondragover in html5. It is very detailed and has a certain reference value. Friends who are interested must finish it!

Example

Triggers when an element is being dragged to the placement target:

In JavaScript:

Object.ondragover=function () {myScript}

In JavaScript, use the addEventListener () method:

Object.addEventListener ("dragover", 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 ondragover in html5". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!