HTML5: arrastrar y soltar

Arrastrar y soltar (DnD) es un concepto poderoso de interfaz de usuario que facilita la copia, reordenación y eliminación de elementos con la ayuda de clics del mouse. Esto permite al usuario hacer clic y mantener presionado el botón del mouse sobre un elemento, arrastrarlo a otra ubicación y soltar el botón del mouse para soltar el elemento allí.

Para lograr la funcionalidad de arrastrar y soltar con HTML4 tradicional, los desarrolladores tendrían que usar una programación JavaScript compleja u otros marcos de JavaScript como jQuery, etc.

Ahora HTML 5 creó una API de arrastrar y soltar (DnD) que brinda soporte nativo de DnD al navegador, lo que facilita mucho la codificación.

HTML 5 DnD es compatible con todos los navegadores principales como Chrome, Firefox 3.5 y Safari 4, etc.

Eventos de arrastrar y soltar

Hay varios eventos que se activan durante varias etapas de la operación de arrastrar y soltar. Estos eventos se enumeran a continuación:

No Señor.	Eventos y descripción
1	dragstart Se dispara cuando el usuario comienza a arrastrar el objeto.
2	dragenter Se activa cuando el mouse se mueve por primera vez sobre el elemento de destino mientras se produce un arrastre. Un oyente de este evento debe indicar si se permite una caída en esta ubicación. Si no hay oyentes, o los oyentes no realizan operaciones, no se permite una caída de forma predeterminada.
3	dragover Este evento se activa cuando el mouse se mueve sobre un elemento cuando se produce un arrastre. La mayor parte del tiempo, la operación que ocurre durante un oyente será la misma que la del evento dragenter.
4	dragleave Este evento se activa cuando el mouse abandona un elemento mientras se produce un arrastre. Los oyentes deben eliminar cualquier marcador de inserción o resaltado utilizado para la retroalimentación.
5	drag Se dispara cada vez que se mueve el mouse mientras se arrastra el objeto.
6	drop El evento de colocación se dispara en el elemento donde se produjo la colocación al final de la operación de arrastre. Un oyente sería responsable de recuperar los datos que se arrastran e insertarlos en la ubicación de colocación.
7	dragend Se dispara cuando el usuario suelta el botón del mouse mientras arrastra un objeto.

Note- Tenga en cuenta que solo se activan los eventos de arrastre; Los eventos del mouse, como mousemove , no se activan durante una operación de arrastre.

El objeto DataTransfer

Los métodos de escucha de eventos para todos los eventos de arrastrar y soltar aceptan Event objeto que tiene un atributo de solo lectura llamado dataTransfer.

los event.dataTransfer devoluciones DataTransfer objeto asociado con el evento de la siguiente manera:

function EnterHandler(event) {
   DataTransfer dt = event.dataTransfer;
   .............
}

El objeto DataTransfer contiene datos sobre la operación de arrastrar y soltar. Estos datos se pueden recuperar y configurar en términos de varios atributos asociados con el objeto DataTransfer como se explica a continuación:

No Señor.	Atributos de DataTransfer y su descripción
1	dataTransfer.dropEffect [ = value ] Devuelve el tipo de operación que está actualmente seleccionada. Este atributo se puede configurar para cambiar la operación seleccionada. Los valores posibles son none, copy, link y move.
2	dataTransfer.effectAllowed [ = value ] Devuelve los tipos de operaciones que se permitirán. Este atributo se puede configurar para cambiar las operaciones permitidas. Los valores posibles son none, copy, copyLink, copyMove, link, linkMove, move, all y uninitialized.
3	dataTransfer.types Devuelve un DOMStringList que enumera los formatos que se establecieron en el evento dragstart. Además, si se arrastra algún archivo, uno de los tipos será la cadena "Archivos".
4	dataTransfer.clearData ( [ format ] ) Elimina los datos de los formatos especificados. Elimina todos los datos si se omite el argumento.
5	dataTransfer.setData(format, data) Agrega los datos especificados.
6	data = dataTransfer.getData(format) Devuelve los datos especificados. Si no hay tales datos, devuelve la cadena vacía.
7	dataTransfer.files Devuelve una lista de archivos de los archivos que se arrastran, si los hay.
8	dataTransfer.setDragImage(element, x, y) Utiliza el elemento dado para actualizar la retroalimentación de arrastre, reemplazando cualquier retroalimentación previamente especificada.
9	dataTransfer.addElement(element) Agrega el elemento dado a la lista de elementos usados para representar la retroalimentación de arrastre.

Proceso de arrastrar y soltar

A continuación se detallan los pasos a seguir para implementar la operación de arrastrar y soltar:

Paso 1: hacer que un objeto se pueda arrastrar

Estos son los pasos a seguir:

Si desea arrastrar un elemento, debe configurar el draggable atribuir a true para ese elemento.
Establecer un detector de eventos para dragstart que almacena los datos que se arrastran.
El oyente de eventos dragstart establecerá los efectos permitidos (copiar, mover, vincular o alguna combinación).

A continuación se muestra el ejemplo para hacer que un objeto se pueda arrastrar:

<!DOCTYPE HTML>

<html>
   <head>
      
      <style type = "text/css">
         
         #boxA, #boxB {
            float:left;padding:10px;margin:10px; -moz-user-select:none;
         }
         #boxA { background-color: #6633FF; width:75px; height:75px;  }
         #boxB { background-color: #FF6699; width:150px; height:150px; }
      </style>
      
      <script type = "text/javascript">
         
         function dragStart(ev) {
            ev.dataTransfer.effectAllowed = 'move';
            ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
            ev.dataTransfer.setDragImage(ev.target,0,0);
            
            return true;
         }
      </script>
      
   </head>
   <body>
      
      <center>
         <h2>Drag and drop HTML5 demo</h2>
         <div>Try to drag the purple box around.</div>
         
         <div id = "boxA" draggable = "true" 
            ondragstart = "return dragStart(ev)">
            <p>Drag Me</p>
         </div>
         
         <div id = "boxB">Dustbin</div>
      </center>
      
   </body>
</html>

Esto producirá el siguiente resultado:

Paso 2: soltar el objeto

Para aceptar una gota, el destino de la gota debe escuchar al menos tres eventos.

los dragenterevento, que se utiliza para determinar si el destino de la gota debe aceptarla o no. Si se va a aceptar la entrega, este evento debe cancelarse.
los dragoverevento, que se utiliza para determinar qué comentarios se mostrarán al usuario. Si se cancela el evento, la retroalimentación (normalmente el cursor) se actualiza en función del valor del atributo dropEffect.
Finalmente, el drop evento, que permite realizar la caída real.

A continuación se muestra el ejemplo para colocar un objeto en otro objeto:

<html>
   <head>
      <style type="text/css">
         #boxA, #boxB {
            float:left;padding:10px;margin:10px;-moz-user-select:none;
         }
         #boxA { background-color: #6633FF; width:75px; height:75px;  }
         #boxB { background-color: #FF6699; width:150px; height:150px; }
      </style>
      <script type="text/javascript">
         function dragStart(ev) {
            ev.dataTransfer.effectAllowed='move';
            ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
            ev.dataTransfer.setDragImage(ev.target,0,0);
            return true;
         }
         function dragEnter(ev) {
            event.preventDefault();
            return true;
         }
         function dragOver(ev) {
            return false;
         }
         function dragDrop(ev) {
            var src = ev.dataTransfer.getData("Text");
            ev.target.appendChild(document.getElementById(src));
            ev.stopPropagation();
            return false;
         }
      </script>
   </head>
   <body>
      <center>
         <h2>Drag and drop HTML5 demo</h2>
         <div>Try to move the purple box into the pink box.</div>
         <div id="boxA" draggable="true" ondragstart="return dragStart(event)">
            <p>Drag Me</p>
         </div>
         <div id="boxB" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)">Dustbin</div>
      </center>
   </body>
</html>

Esto producirá el siguiente resultado: