Sortable: creare liste ordinabili con Javascript

Sortable è una libreria JavaScript che permette di produrre liste “riorganizzabili” ed ordinabili attraverso un’animazione Drag and Drop, funzionante su browser e dispositivi mobile, priva di dipendenze da librerie esterne (come jQuery) ma con un supporto disponibile per Meteor, AngularJS, React, Polymer, Knockout e la maggioranza dei framework CSS/Client-Side, come Bootstrap.

Le funzionalità offerte da Sortable sono numerose:

• permette di trascinare gli elementi (o voci) della lista sia da una lista all’altra sia all’interno della stessa lista;
• permette di settare animazioni CSS in ogni fase della transizione;
• supporta il “touch” per l’azionamento dell’effetto sui device mobile e sui browser moderni;
• supporta i gestori degli eventi ed la proprietà selectable text
• contiene l’auto-scrolling;
• è costruito con le specifiche Drag and Drop standard di HTML 5;
• ha un’API semplice ed intuitiva;
• è compatibile con tutti i framework elencati in precedenza;
• è fornito tramite un servizio CDN.

Dopo aver installato (nella modalità preferita) la libreria, ad esempio tramite CDN:

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

l’implementazione nel codice HTML è davvero molto semplice. Basta creare una comune lista:

<ul id="items">
	<li>item 1</li>
	<li>item 2</li>
	<li>item 3</li>
</ul>

e richiamare il metodo create della classe Sortable passando un oggetto Element come parametro:

var el = document.getElementById('items');
var sortable = Sortable.create(el);
Ovviamente le possibilità di configurazione sono tantissime, tutte documentate ampiamente nella pagina ufficiale del progetto, come l'impostazione dei "filtri" che permettono di personalizzare l'handling dell'animazione:
[code lang=js]Sortable.create(list, {
	filter: ".js-remove, .js-edit",
	onFilter: function (evt) {
		var item = evt.item,
			ctrl = evt.target;
		if (Sortable.utils.is(ctrl, ".js-remove")) {  // Click on remove button
			item.parentNode.removeChild(item); // remove sortable item
		}
		else if (Sortable.utils.is(ctrl, ".js-edit")) {  // Click on edit link
			// ...
		}
	}
})

Il sito Web di Sortable offre tra l'altro una demo perfettamente funzionante utile a mostrare il funzionamento di Sortable: possiamo ordinare orizzontalmente e verticalmente, creare "gruppi di elementi" ordinabili e modificare in real-time l'aspetto ed il contenuto delle liste, aggiungendo, eliminando ed editando le rispettive voci.

Sortable è scaricabile gratuitamente ed è rilasciato sotto licenza MIT-style.

Via Sortable