HTML | Atributo de evento ondragstart

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:  

  1. 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
  2. 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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *