El atributo ondragleave funciona cuando un elemento que se puede arrastrar o una selección de texto deja un destino de colocación válido. Ayuda a arrastrar los elementos y está entrando o saliendo de un destino de colocación. La función de arrastrar y soltar es muy popular en HTML 5. Use la propiedad CSS cuando el elemento se pueda arrastrar e ingrese en el objetivo de soltar.
Etiquetas compatibles: es compatible con todos los trapos HTML.
Sintaxis:
<element ondragleave = "script">
Valor del atributo: el atributo del evento ondragleave contiene un script de valor único que funciona cuando se llama al evento ondragleave.
Nota: Las imágenes y los enlaces se pueden arrastrar de forma predeterminada.
Ejemplo:
html
<!DOCTYPE HTML>
<html>
<head>
<title>ondragleave event attribute</title>
<style>
.droptarget {
width: 250px;
height: 100px;
margin: 15px;
padding: 5px;
border: 2px solid black;
color:Green;
}
</style>
<script>
/* Function to start drag contenr */
function dragStart(event) {
event.dataTransfer.setData("Text", event.target.id);
}
/* Function to dragenter event */
function dragEnter(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "2px solid green";
document.getElementById("demo").innerHTML =
"Dropzone";
}
}
/* Function to dragleave event */
function dragLeave(event) {
if ( event.target.className == "droptarget" ) {
event.target.style.border = "";
document.getElementById("demo").innerHTML =
"Out of Dropzone";
}
}
/* Function to allow drop content */
function allowDrop(event) {
event.preventDefault();
}
/* Function to drop content */
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("Text");
event.target.appendChild(
document.getElementById(data));
}
</script>
</head>
<body>
<center>
<h1>
Drag the element between the boxes
</h1>
<!-- Drag and drop event starts with
ondragleave events -->
<div class = "droptarget" ondrop = "drop(event)"
ondragenter = "dragEnter(event)"
ondragleave = "dragLeave(event)"
ondragover = "allowDrop(event)">
<h1 ondragstart = "dragStart(event)"
draggable = "true" id = "dragtarget">
GeeksforGeeks
</h1>
</div>
<div class = "droptarget"
ondragenter = "dragEnter(event)"
ondragleave = "dragLeave(event)"
ondrop = "drop(event)"
ondragover = "allowDrop(event)">
</div>
<!-- Drag and drop events ends -->
<p style="clear:both;"></p>
<p id="demo"></p>
</center>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con los atributos de eventos ondragleave se enumeran a continuación:
- Google Chrome 4.0
- Internet Explorer 9.0
- MozillaFirefox 3.5
- Safari 6.0
- Ópera 12.0
Publicación traducida automáticamente
Artículo escrito por Sabya_Samadder y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA