DRAG & DROP CON ZEPTO

<script src=”my own” title=”drag &amp; drop con zepto”>

¡Al fin! Después de tanto indagar (y sufrir 😥 ) puedo escribo este post…

jQuery ha hecho que el Drag & Drop (arrastrar y soltar) sea sencillo y fácil de manejar, entonces ¿para qué complicarse la vida con otra cosa? Jejeje, no es complicarse, pues siempre he dicho que ninguna tecnología es la panacea que va a resolver todos los problemas, además, siempre es bueno tener otras alternativas, ¿no? En la variedad está el gusto 😛

En mi campaña de “desapego” por esa librería, y después de encontrar Zepto, explicado en este post, y usada en este otro post, investigué una librería que funciona para la clase de interacciones de arrastrar y soltar, así como ordenar elementos.

Zepto-dnd es una librería fácil de usar, y proporciona, de forma razonablemente sencilla, esta interacción para crear páginas con bastante elementos de UI. Para reforzar este ejemplo, hice una prueba sencilla con tres contenedores en HTML y CSS, y un cuadro que se desplaza entre ellos. Para esto incluimos las librerias necesarias en orden:

    <script src="zepto.js"></script>
    <script src="event.js"></script>
    <script src="data.js"></script>
    <script src="zepto-dnd.js"></script>

Luego el esquema de nuestra aplicación…

    <div class="recipiente">
        <h2>Recipiente 1</h2>
        <div class="cuadro"></div>
    </div>
    <div class="recipiente">
        <h2>Recipiente 2</h2>
    </div>
    <div class="recipiente">
        <h2>Recipiente 3</h2>
    </div>

Un poco de estilo…

.cuadro{
    float: left; margin: 3px;
    width: 50px; height: 50px;
    background-color: #7CBBBB;
    border: 5px solid #D25349;
}
.recipiente{
    float: left; margin: 5px;
    width: 200px; height: 300px;
    background-color: white;
    border: 5px solid #7cbbbb;
}

…y el código que importa 🙂

$(document).ready(function() {
   $('.cuadro').draggable();
   $('.recipiente').droppable();
});

Sencillo, ¿no? Pues ¡no!, ya que para lograr el efecto deseado, tuve que modificar comentar unas líneas del núcleo de la librería Zepto-dnd, específicamente la línea 381 así como sigue:

...
    // e.dataTransfer.effectAllowed = 'copy'
...

Lo hice, porque investigando un poco sobre la API Drag & Drop de HTML5 en este artículo, descubrí que los eventos necesarios para lograr el efecto de arrastrar y soltar son muchos, y la librería, por desgracia, solo maneja un efecto a la vez, aunque éste pudiera ser personalizado por medio de su API, la librería no ofrece muchas opciones para personalizar esto.

Aún así sigue siendo una opción interesante, digna de arrastrar ¿verdad? 😉

</script>

Actualizado 22-05-2015: Basta con comentar la linea 381 y funciona del mismo modo 🙂

Anuncios