Tilføj Drag & Drop til hjemmeside nemt med Dragula

Leder du efter et gratis bibliotek til håndtere træk og slip funktioner? Derefter Dragula er den eneste ressource, du har brug for.

Dette gratis script giver dig mulighed for Tilføj drag og slip-funktioner til ethvert element på din side. Dette omfatter støtte til React & AngularJS-rammerne sammen med vanilla JavaScript.

Dragula er super let at sætte op og det følger med en flok brugerdefinerede udløsere til brugeradfærd. Dette betyder, at du kan skyde dine egne funktioner, når brugeren trækker et element, klikker på et emne eller omarrangerer enhver del af siden.

Hvis du kigger på live demoen, finder du det et par kodestykker, sammen med brugbare prøver.

Dragula-opsætningen kræver kun en enkelt JavaScript-fil at få det til at fungere. Selvom de ekstra muligheder kan blive lidt forvirrende.

Lad os sige, at du har to containere, #venstre og #ret, at du vil understøtte trækbare elementer. Du skal bruge Tilføj disse containere manuelt til Dragula-funktionen at understøtte drag & drop-metoderne.

Hvis du ikke har en solid forståelse af fundamentet for front-end udvikling, så vil du kæmpe for at bruge Dragula. Men GitHub repo har masser af gode eksempler du kan følge med og endda kodestykker, du kan kopiere.

Her er en prøve fra GitHub docs for hvordan mål de to (venstre og højre) containere:

 dragula ([document.querySelector ('# left'), document.querySelector ('# højre')]); 

Bemærk, hvis du kigger nærmere på GitHub-siden, du finder en enorm liste over muligheder du kan videregive til denne funktion.

Du kan vælge om du vil kopiere eller flytte varer, hvilken beholder (r) understøtter de trukkede genstande og endda tilbagekaldsfunktioner der arbejder gennem forskellige brugeradfærd som:

• Hovering over en container
• Første klik og træk begivenhed
• Drop event
• Droppe et element uden for grænserne
• Kloning af et element / beholder ved at trække

Dette bibliotek vil tage nogle indledende arbejde men hvis du er bekendt med JavaScript, det burde være en no-brainer.

Se over demo siden til se hvordan det virker og til få nogle kodeeksempler. Dragula er et massivt bibliotek, og det er nok det bedste open source-script til håndtere træk og slip, med det bredeste udvalg af tilpasning.