El atributo de evento ondragover se activará si un elemento o texto arrastrable se arrastra a un destino de colocación válido. Para arrastrar un elemento, vístalo y arrástrelo hasta el punto de arrastre. Aquí usaremos el atributo arrastrable HTML 5 global. Los datos y elementos no se pueden descartar. Para permitir una caída, debe llamar al método event.preventDefault(). Es nuevo en HTML 5, no es compatible con las siguientes versiones de HTML. Nota: Las imágenes y el enlace se pueden arrastrar de forma predeterminada. Atributos:
- Disparadores de eventos en el objetivo arrastrable:
- ondragstart: se activa cuando el usuario comienza a arrastrar un elemento.
- ondrag: se activa cuando se arrastra un elemento.
- ondragend: se activa cuando el usuario ya no arrastra el elemento.
- Desenstringdores de eventos en el destino de colocación:
- ondragenter: Esto se activará cuando el elemento arrastrado entre en el destino de colocación.
- ondragover: Esto se activará cuando el elemento arrastrado esté sobre el destino de colocación.
- ondragleave: esto se activará cuando el elemento arrastrado abandone el destino de colocación.
- ondrop: esto se activará cuando el elemento arrastrado se haya soltado en el destino de colocación.
Sintaxis:
<element ondragover="script">
Valores de atributo: contiene un script de valor único que contiene el script que se ejecutará en el evento ondragover. Ejemplo:
html
<!DOCTYPE HTML>
<html>
<head>
<title>HTML ondragover event attribute</title>
<style>
.box {
width: 250px;
height: 100px;
margin: 15px;
padding: 5px;
border: 2px solid black;
color: Green;
}
</style>
<script>
/* Function of start drag content */
function dragStart(event) {
event.dataTransfer.setData("Text", event.target.id);
}
/* Function of allow drop content */
function allowDrop(event) {
event.preventDefault();
document.getElementById("demo").innerHTML =
"The element is OVER the droptarget.";
event.target.style.border = "3px solid green";
}
/* Function of drop content */
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("Text");
event.target.appendChild(
document.getElementById(data));
document.getElementById("demo").innerHTML =
"The element was dropped.";
}
</script>
</head>
<body>
<center>
<p>
Drag the element from top box
and drop at bottom box
</p>
<div class="box">
<h1 ondragstart="dragStart(event)"
draggable="true" id="dragtarget">
GeeksforGeeks
</h1>
</div>
<div class="box" ondrop="drop(event)"
ondragover="allowDrop(event)">
</div>
<p style="clear:both;"></p>
<p id="demo"></p>
</center>
</body>
</html>
Producción:
- Antes de arrastrar el elemento:
- Después de soltar el elemento:
Navegadores compatibles: los navegadores compatibles con el atributo de evento ondragover se enumeran a continuación:
- Google Chrome 4.0
- Internet Explorer/ Borde 9.0
- Firefox 3.5
- Ópera 12.0
- Safari 6.0
Publicación traducida automáticamente
Artículo escrito por AlieaRizvi y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA