HTML5 | Drag & Drop

En este "tutorial" explicare con mis palabras y lo mas claro posible el tema de arrastrar y soltar (mas bien conocido como Drag and Drop) en HTML.

En primer lugar esta "propiedad" es un Api de HTML5, y hasta la fecha en el cual se escribio este post, no funciona en todas las versiones de browser. Como siempre IE, da la nota siendo solamente posible hacer funcionar d&d en la version 11.

Vamos al codigo!!
Antes de iniciar, la salida de esto es, en la parte superior tres recuadros que seran los "destinos" y abajo un rectangulo general, con cajitas que seran los elementos "movibles".

1 - HTML dentro del body

<!-- Aqui tenemos el sector superior que tendra los tres recuadros destinos -->    
<section class="sectionTop">
    <article class="sectionTop-article left"></article>
    <article class="sectionTop-article center"></article>
    <article class="sectionTop-article right"></article>
</section>
 
<!-- Aqui tenemos el sector inferior con las cajitas movibles -->    
<section class="sectionBottom">
    <div id="divA" class="box" data-text="A" draggable="true"></div>
    <div id="divB" class="box" data-text="B" draggable="true"></div>
    <div id="divC" class="box" data-text="C" draggable="true"></div>
    <div id="divD" class="box" data-text="D" draggable="true"></div>
</section>

Lo primero a realizar es identificar que elementos haremos movibles, y a estos aplicar el atributo draggable="true". De esta manera le estamos "diciendo" al browser que estos elementos seran arrastables o movibles.


2 - Javascript (en mi caso uso JQuery pero obviamente con javascript puro se puede hacer lo mismo)
Lo primero que debemos tener bien en claro que el drag & drop se divide en dos:
→ drag (arrastrar) :
             Dentro de este tema, debemos tener en cuenta:
             - los elementos arrastables, debemos setearlo con draggable="true"
             - los eventos que usa son: dragstart y dragend (dragstart es obligatorio)
                 .dragstart = inicio
                 .dragend = finalizo
→ drop (soltar)
             Para el caso de los elementos "dropeable", solo debemos tener en cuenta la parte js:
             - los eventos que usa son: dragenter, dragover, drgaleave y dragdrop (dragover y dragdrop obligatorios)
                .dragenter = entré al elemento destino
                .dragover = estoy encima del elemento destino
                .dragleave = sali o estoy fuera del elemento destino
                .dragdrop = me soltaron dentro del elemento destino

<script>
    (function () {
        // For the element "draggable"
        function dragstart(e) {
        /* 
         Aqui seteamos dentro de la propiedad 'dataTransfer' el identificador del elemento.
         En este caso estoy diciendo: "con el indice 'draggable-id' almaceno el id 
         del control que estoy moviendo" 
        */
            (e.originalEvent || e).dataTransfer.setData('draggable-id', this.id);
        }
 
        function dragend(e) { }
        // ---
 
        // For the element "dropable"
        function dragenter(e) { }
 
        function dragleave(e) { }
 
        function dragover(e) {
        /* 
         Aqui, al momento que estamos encima del elemento destino, estamos diciendole al 
         browser que NO ejecute la accion por default de dicho elemento (eso es mayormente 
         para los elemento con postback). Y con el "return false" cortamos o impedimos que 
         el evento se propague hacia arriba. 
        */
            (e.originalEvent || e).preventDefault();
            (e.originalEvent || e).stopPropagation();
            // prefiero usar stopPropagation() (explico en otro post su comportamiento)
 
            // return false;
        }
 
        function drop(e) {
        /* 
         En el ultimo paso o penultimo (segun como se vea; dragend es el ultimo ;) ), lo 
         primero que hacemos es recuperar ese valor que seteamos en el primer paso (dragstart)      y con este valor, movemos el elemento al destino. 
         Como tambien notamos, aplicamos el mismo comportamiento que en el paso anterior 
         (preventDefault y return false).
        */
            var dataId = (e.originalEvent || e).dataTransfer.getData('draggable-id');
            $(this).append($('#' + dataId));
 
            (e.originalEvent || e).preventDefault();
            (e.originalEvent || e).stopPropagation();
            // prefiero usar stopPropagation() (explico en otro post su comportamiento).
 
            // return false;
        }
        // ---
 
        $(document).on('ready', function () {
            $('.box')
                .on('dragstart', dragstart);
 
            $('.sectionTop > article')
                .on('dragover', dragover)
                .on('drop', drop);
        });
 
    })();
</script>

No soy muy experto en este tema de drag and drop de HTML y hay otras cosillas como los atributos y propiedades del objeto dataTransfer, como por ejemplo
           - effectsAllowed
           - dropEffect
           - setDragImage()
pero como es algo que bien bien claro no lo tengo, prefiero no confunfirlos mas. :)

Me despido, y espero que este mini tutorial basico de d&d les haya servido.

Saludos y nos vemos en la proxima!