Ultima revisión 02/05/2013

Drag and Drop desde cualquier dispositivo y navegador

Una de las cosas que siempre me ha gustado es la tecnología Drag and Drop pero por temas de Cross Browser, casi nunca lo he desarrollado en ninguna página.

Pues bien, Redisp.net tiene desarrollado un plugin en JavaScript que funciona perfectamente, o casi, en todos los navegadores y dispositivos que he tenido la suerte de probar, desde portatiles, PCs de sobremesa hasta mis 2 móviles.

Hay que decir que este plugin no es precisamente ligero ya que ocupa 63 KB pero el que sea Cross Browser, que funcione dentro de etiquetas TABLE, que no interfiera en otros plugins de jQuery o Javascript y que sea tan fácil de usar como añadir unas cuantas líneas de código a tu página y una clase a los elementos arrastables le hace digno de mi aprobación.

El código CSS necesario para que funcione, en este ejemplo que os presento a continuación, es el siguiente:

<style>
/* Para hacer el contenedor visible */
#drag1, #drag2{
    border: 2px dashed LightBlue; display: table;
}


/* table */
div#drag1 table, div#drag2 table{
    background-color: #eee;
    border-collapse: collapse;
    margin: 7px;
}

/* table cells */
div#drag1 td, div#drag2 td{
    border: 1px solid navy;
    height: 50px;
    text-align: center;
    font-size: 10pt;
    padding: 2px;
}

/* El objeto arrastable (DIV dentro de la celda de la tabla) */
.drag{
    margin: auto;
    text-align: center;
    width: 87px;
    height: 35px;
    line-height: 35px;
    border: 2px solid SteelBlue;
    background-color: white;
}

/* añadimos aquí el objeto clonado antes de asignarlo a la celda de la tabla de destino */
#obj_new{
    height: 32px;
    width: 100px;
}
</style>

<script type="text/javascript" src="../../js/drag.js"></script>
<!-- Inicializamos drag and drop -->
<script type="text/javascript">
    window.onload = function () {
        var rd = REDIPS.drag;    // Referenciamos a la clase REDIPS.drag
        // Inicializamos los contenedores
        rd.init('drag1');
        rd.init('drag2');
        // Si pulsamos la tecla CRTL los elementos se clonarán
        rd.clone_ctrlKey = true;
    }
</script>

Y ahora el código HTML

<!-- Contenedor drag1 -->
<div id="drag1">
    <table>
        <colgroup>
            <col width="100"/>
            <col width="100"/>
            <col width="100"/>
        </colgroup>
        <tbody>
            <tr>
                <td><div class="drag">A</div></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td><div class="drag">A</div></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td><div class="drag">A</div></td>
            </tr>
        </tbody>
    </table>
</div>

<br/>
<br/>

<!-- Contenedor drag2 -->
<div id="drag2">
    <table>
        <colgroup>
            <col width="100"/>
            <col width="100"/>
            <col width="100"/>
        </colgroup>
        <tbody>
            <tr>
                <td></td>
                <td></td>
                <td><div class="drag">B</div></td>
            </tr>
            <tr>
                <td></td>
                <td><div class="drag">B</div></td>
                <td></td>
            </tr>
            <tr>
                <td><div class="drag">B</div></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>
</div>

Si introducimos la 2 tabla del contenedor drag2 en el contenedor drag1 y, seguidamente, eliminamos el contenedor drag2, ya podemos arrastrar el contenido de las celdas entre las tablas.