Drag and Drop

Indice:

Eventos para Drag and Drop

Arrastrar y soltar en el navegador. No funciona en todos los navegadores. No es lo mismo que drag and drop de un fichero en una área de la página. Interviene un origen, un destino y los datos arrastrados (cortado y copiado)

Ejemplo: arrasdtrar la figura al recuadro izquierdo

Como es el html y código jscript


        
Ejemplo: arrasdtrar la figura sobre el recuadro


    
        


        

    
      
            /**
             * Funcion que permite drop en el elemento html
             */
            function allowDrop(ev) {
                ev.preventDefault();
            }
            
            /**
             * Origen de la información
             * @param {Event} ev 
             */
            function drag(ev) {
                ev.dataTransfer.setData("mi_drag", ev.target.id);
            }

            /**
             * Destino de la información
             * @param {Event} ev - destino
             */
            function drop(ev) {
                ev.preventDefault();
                var data = ev.dataTransfer.getData("mi_drag");
                ev.target.appendChild(document.getElementById(data));
            }

Conceptos en Drag and Drop

Identificar que es arrastrable -Drag source-

Para hacer un elemento html arrastrable se le añade la propiedad draggable="true" y el evento ondragstart

Ejemplo: 
 
        
          
          
This element is draggable.

Los datos que son arrastrables

intro

Drag and drop api

Drag and Drop MDN

Drag and drop ficheros

File Drag and Drop