Arrastra y suelta con SortableJS

Name: Arrastra y suelta con SortableJS
Brand: Jose Aguilar
SKU: joseaguilarblog-7745
Availability: InStock
Rating: 5 (3 reviews)

Una alternativa al típico Sortable de jQuery UI para arrastrar y soltar elementos es SortableJS, una librería de JavaScript justamente para listas de arrastrar y soltar ordenables.

La tecnología avanza y, por ende, los recursos que tenemos los programadores se amplían y mejoran.

Desde mis inicios en la programación, siempre he tenido que desarrollar portales o páginas webs que requieran de esta funcionalidad. Una interfaz que permita a los usuarios organizar su contenido.

En mi proyecto de final de carrera tuve que montar un portal de noticias donde el usuario podía organizar las noticias del portal a su gusto y eso requería arrastrar y soltar las noticias para mantenerlas ordenadas según el criterio o preferencia del usuario.

En proyectos a medida, considero que es necesario ordenar elementos para posicionarlos o mostrarlos primero, según convenga.

Por ejemplo, en un proyecto Ecommerce, una funcionalidad que no puede faltar es que el administrador pueda poder ordenar los productos para mostrar primer los más importantes o los que menos se venden en la página de inicio.

En este artículo vas a descubrir como funciona la librería SortableJS y como insertarla fácilmente en tu página web.

Principales características de SortableJS

Compatible con dispositivos táctiles y navegadores modernos (incluido IE9).
Es posible arrastrar de una lista a otra o dentro de la misma lista.
Animación CSS al mover elementos personalizable.
Admite controladores de arrastre y texto seleccionable.
Desplazamiento automático inteligente.
Detección de intercambio avanzado.
Animaciones suaves.
Soporte de arrastre múltiple.
Compatibilidad con transformaciones CSS.
Creado con la API nativa de arrastrar y soltar de HTML5.
Código ligero de poco peso, 44kb.
No requiere jQuery.
Fácil de instalar.

¿Cómo se instala SortableJS?

Es muy sencillo, te lo puedes descargar de la página oficial o usar el CDN.

En el ejemplo en funcionamiento, usaré la opción CDN.

Antes de la etiqueta de cierre del </body> puedes añadir el script:

Source code

<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>

Y a continuación, puedes hacer una llamada a la clase de la siguiente forma:

Source code

<script>
var items = document.querySelector('.sortable');
Sortable.create(items, {
    animation: 150,
    chosenClass: "chosen",
    ghostClass: "ghost",
    dragClass: "drag",
    onEnd: () => {
        console.log('se movió un elemento');
    }
});
</script>

Con querySelector selecciono el contenedor que contiene los elementos que tendrán este comportamiento y luego paso el elemento como primer parámetro de la función Sortable.create().

En el segundo parámetro de esta función puedes definir las opciones. En el caso del ejemplo:

Defino una animación estableciendo una duración de 150ms.
Establezco la clase «chosen» para personalizar mediante CSS como será el aspecto del elemento seleccionado.
Declaro la clase «ghost» para personalizar mediante CSS el elemento fantasma.
Defino la clase «drag» para personalizar mediante CSS el elemento arrastrado.
Uso la función onEnd() para mostrar un mensaje en consola.

Luego, en el cuerpo de la página debes crear tu lista de elementos que contenga una clase padre «.sortable».

En el ejemplo en funcionamiento he decidido mostrar una grilla de 8 tarjetas de Bootstrap que puedes arrastrar y soltar con el objetivo de ordenar.

El código es el siguiente:

Source code

<div class="row sortable">
    <div class="col-lg-3">
        <div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
            <div class="card-header">Header</div>
            <div class="card-body">
                <h5 class="card-title">Primary card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
        </div>
    </div>
    <div class="col-lg-3">
        <div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
            <div class="card-header">Header</div>
            <div class="card-body">
                <h5 class="card-title">Secondary card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
        </div>
    </div>
    <div class="col-lg-3">
        <div class="card text-white bg-success mb-3" style="max-width: 18rem;">
            <div class="card-header">Header</div>
            <div class="card-body">
                <h5 class="card-title">Success card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
        </div>
    </div>
    <div class="col-lg-3">
        <div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
            <div class="card-header">Header</div>
            <div class="card-body">
                <h5 class="card-title">Danger card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
        </div>
    </div>
    <div class="col-lg-3">
        <div class="card text-white bg-warning mb-3" style="max-width: 18rem;">
            <div class="card-header">Header</div>
            <div class="card-body">
                <h5 class="card-title">Warning card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
        </div>
    </div>
    <div class="col-lg-3">
        <div class="card text-white bg-info mb-3" style="max-width: 18rem;">
            <div class="card-header">Header</div>
            <div class="card-body">
                <h5 class="card-title">Info card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
        </div>
    </div>
    <div class="col-lg-3">
        <div class="card bg-light mb-3" style="max-width: 18rem;">
            <div class="card-header">Header</div>
            <div class="card-body">
                <h5 class="card-title">Light card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
        </div>
    </div>
    <div class="col-lg-3">
        <div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
            <div class="card-header">Header</div>
            <div class="card-body">
                <h5 class="card-title">Dark card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
            </div>
        </div>
    </div> 
</div>

Estilos CSS para personalizar los movimientos

Source code

.sortable div .card {
    cursor: move;
}
 
.sortable div.chosen .card {
    transform: scale(1.02), rotate(-1deg);
    box-shadow: 0px 0px 20px #ccc;
    background-color: #dadada;
}
 
.sortable div.ghost .card {
    opacity: 0.4;
}
 
.sortable div.drag .card {
    background-color: black;
}

Ver demo Descargar

¿Te gustaría poder mantener el orden elegido de los elementos?

En otro tutorial que haré pronto, te estaré dando las claves para guardar los movimientos en localStorage o en una base de datos para que el orden quede registrado.