Lägg Drag och släpp till webbplatsen enkelt med Dragula

Letar du efter ett gratis bibliotek till hantera dra och släpp funktioner? Sedan Dragula är den enda resursen du behöver.

Detta gratis skript låter dig lägg till dra och släpp funktioner för något element på din sida. Detta inkluderar stöd för React & AngularJS-ramarna, tillsammans med vanilj JavaScript.

Dragula är super lätt att installera och det kommer med en massa anpassade triggers för användarbeteenden. Det betyder att du kan avfyra dina egna funktioner efter att användaren drack ett föremål, klickar på ett föremål eller omarrangerar någon del av sidan.

Om du tittar på live demo hittar du det några kodrader, tillsammans med användbara prov.

Dragula-inställningen kräver bara en enda JavaScript-fil för att få det att fungera. Även de extra alternativen kan bli lite förvirrande.

Låt oss säga att du har två behållare, #vänster och #höger, att du vill stödja draagbara föremål. Du måste Lägg manuellt dessa behållare till Dragula-funktionen för att stödja drag och släpp metoder.

Om du inte har ett solidt grepp om grunden för front-end-utveckling kommer du att kämpa för att använda Dragula. Men, GitHub repo har gott om bra exempel du kan följa med och även kodsedlar du kan kopiera.

Här är ett exempel från GitHub docs för hur man gör det rikta in de två (vänster och höger) behållarna:

 dragula ([document.querySelector ('# left'), document.querySelector ('# höger')]); 

Observera om du tittar längre på GitHub-sidan som du hittar en enorm lista över alternativ du kan vidarebefordra till den här funktionen.

Du kan välja om du vill kopiera eller flytta objekt, vilken behållare som stödjer de slagna artiklarna och även återuppringningsfunktioner som fungerar genom olika användarbeteenden som:

• Hovering över en behållare
• Initial klicka och dra händelse
• Drop händelse
• Att släppa ett element ur gränsen
• Kloning av ett element / behållare genom att dra

Detta bibliotek kommer att ta lite inledande arbete men om du är bekant med JavaScript så borde det vara en no-brainer.

Titta över demoversidan till se hur det fungerar och till få några kodprov idéer. Dragula är ett massivt bibliotek och det är förmodligen det bästa open source-skriptet till hantera dra och släpp, med det bredaste utbudet av anpassning.