Spisie treści
Efekt przeciągnij i upuść Polega na pobraniu elementu strony gestem myszy, najczęściej poprzez kliknięcie na nim i przeciągnięcie tego elementu w obszar, w którym można go zdeponować, wtedy w zależności od funkcjonalności naszej strony nastąpi nowe zdarzenie lub nie.W dawnych czasach osiągano to za pomocą Biblioteki i frameworki Javascript w stylu jQuery, ponieważ obsługa HTML była ograniczona, jednak z HTML5, te funkcje są już zawarte w naszej przeglądarce.
Tworzenie elementów do przeciągania
W dokumencie HTML musimy zdefiniować elementy, które będą mogły wykorzystać ten efekt, do tego mamy pewne właściwości, które pomogą nam w tym celu.
Umieszczając atrybut przeciągany do elementu wskazujemy przeglądarce, że ten element może, ale nie musi być przeciągany, dla tego atrybut ma wartości true, false i auto, jak możemy wnioskować, true mówi przeglądarce, że jeśli musi to być element, który jest przeciągany, false jest inaczej, wyłącza efekt i automatycznie informuje przeglądarkę, aby podjęła decyzję, czy aktywować sam efekt.
Dobrą praktyką jest użycie wartości true lub false w celu wyraźnego wskazania, czy efekt jest aktywny, ponieważ chociaż większość przeglądarek interpretuje wartość auto jako true, nie powinniśmy pozostawiać przebiegu naszej strony osobom trzecim.
Wydarzenia z efektem przeciągania
Zanim przejdziemy do przykładu, zdefiniujemy kolejną ważną cechę przeciągania elementu, a mianowicie to, że rozpoczynając przeciąganie elementu, mamy 3 zdarzenia, które możemy zidentyfikować i za pomocą których możemy przeprowadzić różne przetwarzanie, jeśli chcemy , te wydarzenia to:
dragstart, to początek zdarzenia przeciągania występuje po umieszczeniu myszy nad elementem, kliknięciu i rozpoczęciu przeciągania tego elementu.
ciągnąć, dzieje się to po dragstart i trwa przez cały czas przeciągania elementu.
dragend, pojawia się w momencie, gdy przestajemy przeciągać przedmiot, niezależnie od tego, czy zostawiamy go w obszarze depozytu, czy też pokutowaliśmy i przestaliśmy go przeciągać w połowie.
Przeciągnij implementację
Zobaczmy poniżej przykład, w jaki sposób włączymy wszystkie powyższe na stronie, stworzymy listę elementów, do których zamierzamy przypisać przeciągany atrybut jako prawdziwy, stworzymy kilka klas css, które pozwolą nam modyfikować ich style, a na koniec wraz ze zdarzeniami wymienionymi podczas przeciągania elementu zmieni on jego kolor.
Zobaczmy kod:
Przykład
Wpłać tutaj
Teraz jak to wygląda w naszej przeglądarce:
