Dodaj Drag & Drop na spletno stran zlahka z Dragula

Iščete brezplačno knjižnico ročaj funkcije povleci in spusti? Potem pa Dragula je edini vir, ki ga boste potrebovali.

Ta brezplačen skript vam omogoča dodajte funkcije povleci in spusti za kateri koli element na strani. To vključuje podporo za okvire React & AngularJS, skupaj z vanilijevim JavaScriptom.

Dragula je zelo preprosta za postavitev in prihaja kup sprožilcev po meri za vedenje uporabnikov. To pomeni, da lahko uporabite svoje funkcije, ko uporabnik povleče element, klikne element ali preuredi kateri koli del strani.

Če pokukate na demo v živo, ga boste našli nekaj odrezkov kode, skupaj z uporabnih vzorcev.

Nastavitev Dragule zahteva samo eno datoteko JavaScript da deluje. Čeprav, dodatne možnosti lahko dobite malo zmedeno.

Na primer, recimo, da imate dva vsebnika, #left in #prav, ki jih želite podpirati elemente, ki jih je mogoče povleči. Morali boste ročno dodajte te posode v funkcijo Dragula za podporo metodam povleci in spusti.

Če nimate trdnega razumevanja temeljev razvoja front-end, boste težko uporabili Dragulo. Ampak, GitHub repo ima veliko odlične primere, ki jih lahko spremljate in celo odrezke kode, ki jih lahko kopirate.

Tukaj je en vzorec iz dokumentov GitHub, kako ciljajte na dva (leva in desna) zabojnika:

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

Upoštevajte, če pogledate stran GitHub, ki jo boste našli ogromen seznam možnosti to funkcijo lahko prenesete.

Lahko izberete ali kopirate ali premikate elemente, kateri vsebniki podpirajo vlečene predmete in celo funkcije povratnega klica ki delujejo prek različnih vedenj uporabnikov, kot so:

• Lebdenje nad posodo
• Začetni dogodek za klik in povleci
• Spusti dogodek
• Spuščanje elementa izven meja
• Kloniranje elementa / vsebnika z vlečenjem

Ta knjižnica nekaj začetnega dela vendar, če ste seznanjeni s JavaScriptom, bi to moral biti nepremišljen.

Oglejte si demo stran na Poglej kako deluje in do dobite nekaj idej za vzorec kode. Dragula je ogromna knjižnica in je verjetno najboljši odprtokodni scenarij ročaj povleci in spusti, z najširšim obsegom prilagajanja.