El atributo de evento HTML ondragstart se utiliza cuando el usuario desea arrastrar el texto o el elemento. Es simplemente el proceso en el que pulsamos sobre el texto deseado para arrastrarlo y soltarlo en una ubicación diferente.
Sintaxis:
El proceso DRAG & DROP incluye muchas operaciones:
- Operaciones utilizadas para el objetivo arrastrable:
- ondrag: se usa cuando se arrastra un elemento
- ondragstart: se usa cuando el usuario comienza a arrastrar un elemento
- ondragend: se utiliza cuando el usuario ha terminado de arrastrar el elemento
- Operaciones utilizadas para el objetivo de soltar:
- ondrop: se utiliza cuando el elemento arrastrado se suelta en el destino de colocación
- ondragover: se usa cuando el elemento arrastrado está sobre el destino de colocación
- ondragleave: se utiliza cuando el elemento arrastrado sale del destino de colocación
- ondragenter: se usa cuando el elemento arrastrado ingresa al destino de colocación
Ejemplo-1: Volver cuando el elemento se arrastró y soltó.
HTML
<!DOCTYPE HTML> <html> <head> <style> .droptarget { float: CENTRE; width: 150px; height: 45px; margin: 25px; padding: 15px; border: 2px solid LIGHTGREEN; } </style> </head> <body> <p>Drag the text between the boxes.</p> <div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"> <!-- ondragstart script --> <p ondragstart="dragStart(event)" ondrag="dragging(event)" draggable="true" id="dragtarget"> PRESS & DRAG </p> </div> <div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)"> </div> <p id="demo"></p> <script> function dragStart(event) { event.dataTransfer.setData( "Text", event.target.id); } function dragging(event) { document.getElementById( "demo").innerHTML = "Dragging"; } function allowDrop(event) { event.preventDefault(); } function drop(event) { event.preventDefault(); var data = event.dataTransfer.getData("Text"); event.target.appendChild( document.getElementById(data)); document.getElementById( "demo").innerHTML = "Dropped"; } </script> </body> </html>
Producción:
Antes de arrastrar:
Después de la caída:
Navegadores compatibles:
- cromo 4.0
- Firefox 3.5
- Safari 6.0
- Ópera 12.0
- Internet Explorer 9.0
Publicación traducida automáticamente
Artículo escrito por AkshayGulati y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA