Legg Drag & Drop til nettsiden enkelt med Dragula

Leter du etter et gratis bibliotek til håndter dra og slipp funksjoner? Deretter Dragula er den eneste ressursen du trenger.

Dette gratis skriptet lar deg Legg til dra og slipp-funksjoner for ethvert element på siden din. Dette inkluderer støtte for React & AngularJS-rammene, sammen med vanilla JavaScript.

Dragula er super lett å sette opp og det følger med en rekke egendefinerte utløsere for brukeroppførsel. Dette betyr at du kan brenne dine egne funksjoner etter at brukeren har trukket et element, klikker på et element eller omarrangerer en hvilken som helst del av siden.

Hvis du tar en titt på live demo finner du noen kodestykker, sammen med brukbare prøver.

Dragula-oppsettet krever bare en enkelt JavaScript-fil for å få det til å fungere. Selv om de ekstra alternativene kan bli litt forvirrende.

For eksempel, la oss si at du har to beholdere, #venstre og #Ikke sant, at du vil støtte drapbare elementer. Du må Legg disse beholderne manuelt til Dragula-funksjonen for å støtte dra og slipp metoder.

Hvis du ikke har en solid forståelse av grunnleggende for front-end-utvikling, vil du slite med å bruke Dragula. Men, GitHub-repoen har nok av gode eksempler du kan følge med Til og med kodebiter du kan kopiere.

Her er ett eksempel fra GitHub docs for hvordan du skal mål de to (venstre og høyre) beholdere:

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

Merk om du ser nærmere på GitHub siden du finner en stor liste over alternativer Du kan overføre til denne funksjonen.

Du kan velge om du vil kopiere eller flytte varer, hvilken beholder (er) støtter de slepede elementene Til og med tilbakeringingsfunksjoner som arbeider gjennom ulike brukeradferd som:

• Hovering over en container
• Første klikk og dra hendelsen
• Drop event
• Fjerne et element utenom grensene
• Kloning av et element / en beholder ved å dra

Dette biblioteket vil ta litt innledende arbeid men hvis du er kjent med JavaScript, bør det være en no-brainer.

Se over demo siden til se hvordan det virker og til få noen eksempler på kodeksempler. Dragula er et massivt bibliotek, og det er sannsynligvis det beste open source-skriptet til håndtere dra og slipp, med det bredeste spekteret av tilpasning.