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

This article will explain in detail how to use ondragleave in html5. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Example

Execute _ JavaScript when the draggable element is moved out of the placement target:

In JavaScript:

Object.ondragleave=function () {myScript}

In JavaScript, use the addEventListener () method:

Object.addEventListener ("dragleave", 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: No 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 the end of this article on "how to use ondragleave 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, please 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.