Přidat Drag & Drop na webové stránky snadno s Dragula

Hledáte bezplatnou knihovnu ovládat funkce přetažení? Pak Dragula je jediný zdroj, který budete potřebovat.

Tento bezplatný skript vám umožní přidejte funkce drag & drop pro libovolný prvek na stránce. To zahrnuje podporu rámců React & AngularJS spolu s vanilkovým JavaScriptem.

Dragula je super snadné nastavení a přichází s spoustu vlastních aktivačních událostí pro chování uživatelů. To znamená, že můžete vypálit vlastní funkce poté, co uživatel přetáhne položku, klikne na položku nebo změní uspořádání jakékoli části stránky..

Pokud se podíváte na živé demo, najdete ho pár kousků kódu, spolu s použitelné vzorky.

Nastavení Dragula vyžaduje pouze jeden soubor JavaScriptu aby to fungovalo. Ačkoli další možnosti mohou být trochu matoucí.

Řekněme například, že máte dva kontejnery, #vlevo, odjet a #že jo, které chcete podporovat položky, které lze přetáhnout. Budeš to muset ručně přidejte tyto nádoby do funkce Dragula podporovat metody drag & drop.

Pokud nemáte pevné pochopení základů vývoje front-end, budete se snažit použít Dragula. Repo GitHub má však spoustu skvělé příklady můžete sledovat spolu s a dokonce úryvky kódu, které můžete kopírovat.

Zde je jeden vzorek z dokumentů GitHub, jak na to zaměřte dvě (levé a pravé) kontejnery:

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

Pokud se podíváte dále na stránku GitHub, najdete ji obrovský seznam možností můžete tuto funkci předat.

Můžeš si vybrat kopírování nebo přesouvání položek, který kontejner (y) podporují přetažené položky a dokonce funkce zpětného volání fungují prostřednictvím různých chování uživatelů, jako jsou:

• Vznášející se nad kontejnerem
• Počáteční událost click & drag
• Událost Drop
• Vynechání prvku z mezí
• Klonování elementu / kontejneru přetažením

Tato knihovna podnikne nějaké počáteční práce ale pokud jste obeznámeni s JavaScriptem, mělo by to být neoriginální.

Podívejte se na demo stránku Podívejme se, jak to funguje a získat pár nápadů na ukázky kódu. Dragula je masivní knihovna a je to asi nejlepší open-source skript rukojeť drag & drop, s nejširším rozsahem přizpůsobení.