Aggiungi Drag & Drop al sito Web facilmente con Dragula

Alla ricerca di una libreria gratuita a gestire le funzionalità di trascinamento e rilascio? Poi Dragula è l'unica risorsa di cui avrai bisogno.

Questo script gratuito ti permette aggiungi funzionalità di trascinamento per qualsiasi elemento della pagina. Ciò include il supporto per i framework React & AngularJS, insieme a vanilla JavaScript.

Dragula è super facile da configurare e viene fornito con un gruppo di trigger personalizzati per i comportamenti degli utenti. Ciò significa che è possibile attivare le proprie funzioni dopo che l'utente trascina un oggetto, fa clic su un elemento o riorganizza qualsiasi parte della pagina.

Se dai una sbirciata alla demo dal vivo lo troverai alcuni frammenti di codice, insieme a campioni utilizzabili.

La configurazione di Dragula richiede solo un singolo file JavaScript per farlo funzionare. Anche se, le opzioni extra possono diventare un po 'confuse.

Ad esempio, supponiamo tu abbia due contenitori, #sinistra e #destra, che vuoi supportare elementi trascinabili. Avrai bisogno di aggiungere manualmente questi contenitori alla funzione Dragula per supportare i metodi di trascinamento della selezione.

Se non hai una solida conoscenza dei fondamenti dello sviluppo del front-end, allora dovrai faticare per usare Dragula. Ma il repository GitHub ha un sacco di grandi esempi che puoi seguire insieme e persino frammenti di codice che è possibile copiare.

Ecco un esempio dei documenti GitHub su come indirizza i due contenitori (sinistro e destro):

 dragula ([document.querySelector ('# left'), document.querySelector ('# right')]); 

Nota se guardi oltre la pagina GitHub che troverai un enorme elenco di opzioni puoi passare a questa funzione.

Puoi scegliere se copiare o spostare oggetti, quale contenitore (s) supporta gli oggetti trascinati e persino funzioni di callback che funzionano attraverso diversi comportamenti dell'utente come:

• Librandosi su un contenitore
• Fare clic e trascinare l'evento iniziale
• Evento discendente
• Eliminazione di un elemento fuori dai limiti
• Clonazione di un elemento / contenitore tramite trascinamento

Questa libreria ci vorrà del lavoro iniziale ma se hai familiarità con JavaScript dovrebbe essere un gioco da ragazzi.

Guarda oltre la pagina demo a vedere come funziona e a prendi alcune idee di esempio di codice. Dragula è un'enorme libreria ed è probabilmente il miglior script open-source gestisci il trascinamento e rilascio, con la più ampia gamma di personalizzazione.