Pridať Drag & Drop na webové stránky Ľahko s Dragula

Hľadáte knižnicu zadarmo ovládanie funkcií drag & drop? potom Dragula je jediným zdrojom, ktorý budete potrebovať.

Tento bezplatný skript vám umožní pridanie funkcií drag & drop pre ľubovoľný prvok na vašej stránke. Patrí sem podpora pre rámce React & AngularJS spolu s Java vanilkami.

Dragula je veľmi jednoduché nastaviť a prichádza s veľa vlastných spúšťačov pre správanie používateľa. To znamená, že môžete vypáliť svoje vlastné funkcie po tom, čo používateľ pretiahne určitú položku, klikne na položku alebo presmeruje ľubovoľnú časť stránky.

Ak sa pozriete na živé demo, nájdete to niekoľko úryvkov kódu, spolu s použiteľné vzorky.

Nastavenie Dragula vyžaduje iba jediný súbor JavaScript aby to fungovalo. Hoci, extra možnosti môžu byť trochu mätúce.

Povedzme napríklad, že máte dva kontajnery, #left a #správny, , ktoré chcete podporovať drahé položky. Budete musieť manuálne pridajte tieto kontajnery do funkcie Dragula na podporu metód drag & drop.

Ak nemáte dôkladné pochopenie základov vývoja front-end, budete sa snažiť používať Dragula. Ale repo GitHub má veľa skvelé príklady, ktoré môžete sledovať spolu s a dokonca útržky kódu, ktoré môžete skopírovať.

Tu je jedna vzorka z dokumentov GitHub, ako postupovať zacieľte na dve (ľavé a pravé) kontajnery:

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

Poznámka, ak sa pozriete ďalej na stránke GitHub, ktorú nájdete obrovský zoznam možností môžete prejsť na túto funkciu.

Môžeš si vybrať či chcete kopírovať alebo presúvať položky, ktoré kontajner (y) podporujú pretiahnuté položky a dokonca funkcie spätného volania ktoré pracujú v rôznych správaniach používateľov, ako napríklad:

• Umiestnite sa na kontajner
• Počiatočná udalosť kliknutia a pretiahnutia
• Drop event
• Odstránenie prvku mimo hraníc
• Klonovanie prvku / kontajnera ťahaním

Táto knižnica bude mať nejakú úvodnú prácu ale ak ste s JavaScriptorom oboznámení, mal by to byť nepríjemný.

Pozrite sa na demo stránku pozri ako to funguje a získate niekoľko vzorových nápadov. Dragula je masívna knižnica a je to pravdepodobne najlepší skript open source zvládnuť drag & drop s najširším rozsahom prispôsobenia.