Dodaj Drag & Drop na web stranicu lako s Dragula

Tražim besplatnu knjižnicu značajke povlačenja i ispuštanja ručke? Zatim Dragula je jedini resurs koji će vam trebati.

Ova besplatna skripta omogućuje vam dodajte značajke povlačenja i ispuštanja za bilo koji element na svojoj stranici. To uključuje podršku za okvire React & AngularJS, zajedno s vanilijskim JavaScriptom.

Dragula je vrlo jednostavno postaviti i dolazi s njom hrpa prilagođenih okidača za ponašanje korisnika. To znači da možete ispaliti vlastite funkcije nakon što korisnik povuče stavku, klikne na stavku ili preuredi bilo koji dio stranice.

Ako zavirite u demo uživo, naći ćete ga nekoliko isječaka koda, zajedno s upotrebljivi uzorci.

Dragula postava zahtijeva samo jednu JavaScript datoteku da bi to funkcioniralo. Iako, dodatne opcije mogu dobiti malo zbunjujuće.

Na primjer, recimo da imate dva spremnika, #lijevo i #pravo, koje želite podržati stavkama koje se mogu pomicati. Morat ćete ručno dodajte ove spremnike u funkciju Dragula za podršku metoda povlačenja i ispuštanja.

Ako nemate čvrsto razumijevanje osnova razvoja front-end-a onda ćete se mučiti s korištenjem Dragule. No, GitHub repo ima dosta sjajni primjeri koje možete pratiti pa čak i isječke koda koje možete kopirati.

Evo jednog primjera iz GitHubovih dokumenata kako ciljajte dva (lijeva i desna) spremnika:

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

Imajte na umu ako pogledate dalje na GitHub stranici koju ćete pronaći ogroman popis opcija možete prijeći na ovu funkciju.

Možeš odabrati kopirati ili premještati stavke, koji kontejner (i) podržavaju povučene stavke pa čak i povratne funkcije koji rade kroz različita ponašanja korisnika, kao što su:

Lebdi iznad spremnika
Početni događaj klikova i povlačenja
Spusti događaj
Izbacivanje elementa izvan granica
Kloniranje elementa / spremnika povlačenjem

Ova knjižnica će poduzeti neke početne radove ali ako ste upoznati s JavaScriptom, to bi trebao biti ne-pametan.

Pogledajte preko demo stranice na vidjeti kako to radi i za dobiti nekoliko ideja za uzorak koda. Dragula je masivna knjižnica i vjerojatno je najbolji open-source skripti rukovanje povlačenjem i ispuštanjem, s najširim rasponom prilagodbe.