Logo de islavisual
Logo de islavisual IslaVisual
imagen de sección

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.

A
A
A
B
B
B

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.

Sobre el autor

Pablo Enrique Fernández Casado

CEO de IslaVisual, Manager, Full Stack Analyst Developer y formador por cuenta ajena con más de 25 años de experiencia en el campo de la programación y más de 10 en el campo del diseño, UX, usabilidad web y accesibilidad web. También es escritor y compositor de música, además de presentar múltiples soft kills como la escucha activa, el trabajo en equipo, la creatividad, la resiliencia o la capacidad de aprendizaje, entre otras.

Especializado en proveer soluciones integrales de bajo coste y actividades de consultoría de Usabilidad, Accesibilidad y Experiencia de Usuario (UX), además de ofrecer asesoramiento en SEO, optimización de sistemas y páginas web, entre otras habilidades.