Dodaj Drag & Drop do witryny łatwo z Dragula

Szukasz darmowej biblioteki do obsługiwać funkcje przeciągnij i upuść? Następnie Dragula jest jedynym potrzebnym zasobem.

Ten darmowy skrypt pozwala dodaj funkcje przeciągnij i upuść dla dowolnego elementu na swojej stronie. Obejmuje to obsługę ram React i AngularJS oraz waniliowy JavaScript.

Dragula jest bardzo łatwa w konfiguracji i jest dostarczana kilka niestandardowych wyzwalaczy dla zachowań użytkowników. Oznacza to, że możesz uruchamiać własne funkcje po przeciągnięciu elementu przez użytkownika, kliknięciu elementu lub zmianie kolejności dowolnej części strony.

Jeśli rzucisz okiem na prezentację na żywo, którą znajdziesz kilka fragmentów kodu, wraz z użyteczne próbki.

Konfiguracja Dragula wymaga tylko jednego pliku JavaScript aby to działało. Chociaż dodatkowe opcje mogą być nieco mylące.

Na przykład powiedzmy, że masz dwa pojemniki, #lewo i #dobrze, które chcesz obsługiwać przeciągane elementy. Musisz ręcznie dodaj te pojemniki do funkcji Dragula wspierać metody przeciągnij i upuść.

Jeśli nie masz solidnego zrozumienia podstaw rozwoju front-endu, będziesz miał trudności z użyciem Draguli. Ale repo GitHub ma mnóstwo wspaniałe przykłady, za którymi możesz podążać i nawet fragmenty kodu, które możesz skopiować.

Oto jedna próbka z dokumentów GitHub wyceluj w dwa (lewy i prawy) kontener:

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

Uwaga, jeśli spojrzysz dalej na stronę GitHub, którą znajdziesz ogromna lista opcji możesz przejść do tej funkcji.

Możesz wybrać czy kopiować lub przenosić przedmioty, które pojemniki obsługują przeciągane elementy i nawet funkcje zwrotne to działa poprzez różne zachowania użytkownika, takie jak:

Unosząc się nad pojemnikiem
Początkowe zdarzenie „kliknij i przeciągnij”
Upuść zdarzenie
Upuszczenie elementu poza granice
Klonowanie elementu / kontenera przez przeciąganie

Ta biblioteka weźmie trochę wstępnej pracy ale jeśli znasz JavaScript, to powinno być oczywiste.

Przejrzyj stronę demonstracyjną do Zobacz jak to działa i do zdobądź kilka przykładowych pomysłów na kod. Dragula jest ogromną biblioteką i jest prawdopodobnie najlepszym skryptem open source obsługiwać przeciągnij i upuść, z najszerszym zakresem dostosowywania.