Voeg eenvoudig drag & drop toe aan website met Dragula

Op zoek naar een gratis bibliotheek om omgaan met drag & drop-functies? Dan Dragula is de enige bron die je nodig hebt.

Met dit gratis script kun je voeg drag & drop-functies toe voor elk element op uw pagina. Dit omvat ondersteuning voor de React & AngularJS-frameworks, samen met vanilla JavaScript.

Dragula is super eenvoudig in te stellen en wordt geleverd met een reeks aangepaste triggers voor gebruikersgedrag. Dit betekent dat u uw eigen functies kunt activeren nadat de gebruiker een item heeft versleept, op een item heeft geklikt of een deel van de pagina opnieuw heeft gerangschikt.

Als je een kijkje neemt bij de live demo, zul je ontdekken een paar codefragmenten, samen met bruikbare monsters.

De opstelling van de Dragula heeft slechts één JavaScript-bestand nodig om het te laten werken. Hoewel, de extra opties kunnen een beetje verwarrend zijn.

Stel dat u bijvoorbeeld twee containers heeft, #links en #rechts, dat u gesleepte items wilt ondersteunen. Dat moet je doen voeg deze containers handmatig toe aan de Dragula-functie om de drag & drop-methoden te ondersteunen.

Als je de basisprincipes van de front-end ontwikkeling niet goed kent, dan zul je moeite hebben om Dragula te gebruiken. Maar de repo van GitHub heeft er genoeg van geweldige voorbeelden die u kunt volgen en zelfs codefragmenten die u kunt kopiëren.

Hier is één voorbeeld uit de GitHub-documentatie voor meer informatie richt op de twee (linker en rechter) containers:

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

Let op als je verder kijkt op de GitHub-pagina die je zult vinden een enorme lijst met opties je kunt naar deze functie gaan.

Je kan kiezen om items te kopiëren of verplaatsen, welke container (s) de gesleepte items ondersteunen en zelfs callback-functies die werken via verschillende gebruikersgedragingen zoals:

• Zweven boven een container
• Initial click & drag-gebeurtenis
• Laat evenement vallen
• Een element buiten bereik laten vallen
• Een element / container klonen door te slepen

Deze bibliotheek zal wat eerste werk doen maar als je bekend bent met JavaScript, zou het een goed idee moeten zijn.

Kijk over de demopagina naar zie hoe het werkt en naar ontvang een paar ideeën voor codevoorbeelden. Dragula is een enorme bibliotheek en het is waarschijnlijk het beste opensource-script voor omgaan met slepen en neerzetten, met het grootste aanpassingsbereik.