HTML5 – Przeciągnij i upuść
Przeciągnij i upuść (DnD) to zaawansowana koncepcja interfejsu użytkownika, która ułatwia kopiowanie, zmianę kolejności i usuwanie przedmiotów za pomocą kliknięć myszą. Dzięki temu użytkownik może kliknąć i przytrzymać przycisk myszy nad elementem, przeciągnąć go w inne miejsce i zwolnić przycisk myszy, aby upuścić element w tym miejscu.
Aby osiągnąć funkcję przeciągania i upuszczania w tradycyjnym HTML4, programiści musieliby albo używać złożonego programowania JavaScript lub innych frameworków JavaScript, takich jak jQuery itp.
Teraz HTML 5 wymyślił interfejs API Drag and Drop (DnD), który zapewnia natywną obsługę DnD w przeglądarce znacznie łatwiej jest kodować.
HTML 5 DnD jest obsługiwany przez wszystkie główne przeglądarki, takie jak Chrome, Firefox 3.5 i Safari 4 itp.
Przeciągnij i upuść zdarzenia
Istnieje wiele zdarzeń uruchamianych na różnych etapach operacji przeciągania i upuszczania. Te zdarzenia są wymienione poniżej –
| Sr.No. | Zdarzenia & Opis |
|---|---|
| 1 |
dragstart Uruchamia się, gdy użytkownik zaczyna przeciągać obiekt. |
| 2 |
dragenter Uruchamiany, gdy mysz jest po raz pierwszy najeżdżana na element docelowy podczas przeciągania. Odbiornik tego zdarzenia powinien wskazać, czy dozwolone jest upuszczenie w tej lokalizacji. Jeśli nie ma słuchaczy lub słuchacze nie wykonują żadnych operacji, to upuszczanie nie jest domyślnie dozwolone. |
| 3 |
dragover To zdarzenie jest uruchamiane, gdy wskaźnik myszy jest przesuwany nad elementem podczas przeciągania. W większości przypadków operacja wykonywana podczas nasłuchiwania będzie taka sama jak w przypadku zdarzenia dragenter. |
| 4 |
dragleave To zdarzenie jest wywoływane, gdy mysz opuszcza element podczas przeciągania. Słuchacze powinni usunąć wszelkie znaczniki podświetlenia lub wstawienia używane do usuwania opinii. |
| 5 |
przeciągnij Uruchamia się za każdym razem, gdy mysz jest poruszana podczas przeciągania obiektu. |
| 6 |
drop Zdarzenie drop jest wywoływane na elemencie, w którym nastąpiło upuszczenie pod koniec operacji przeciągania. Słuchacz byłby odpowiedzialny za pobranie danych, które są przeciągane i wstawienie ich w miejscu upuszczenia. |
| 7 |
dragend Uruchamia się, gdy użytkownik zwolni przycisk myszy podczas przeciągania obiektu. |
Uwaga – Zauważ, że uruchamiane są tylko zdarzenia przeciągania; zdarzenia myszy, takie jak mousemove, nie są wyzwalane podczas operacji przeciągania.
Obiekt DataTransfer
Metody detektora zdarzeń dla wszystkich zdarzeń przeciągania i upuszczania akceptują obiekt Event, który ma atrybut tylko do odczytu dataTransfer.
Event.dataTransfer zwraca obiekt DataTransfer powiązany ze zdarzeniem w następujący sposób –
function EnterHandler(event) { DataTransfer dt = event.dataTransfer; .............}
Obiekt DataTransfer przechowuje dane o przeciągnięciu i upuść operację. Te dane można pobierać i ustawiać w postaci różnych atrybutów powiązanych z obiektem DataTransfer, jak wyjaśniono poniżej –
| Sr.No. | Atrybuty DataTransfer i ich opis |
|---|---|
| 1 |
dataTransfer.dropEffect
|
| 2 |
dataTransfer.effectAllowed
|
| 3 |
dataTransfer.types Zwraca DOMStringList zawierający listę formatów, które zostały ustawione w zdarzeniu dragstart. Ponadto, jeśli przeciągane są jakiekolwiek pliki, jednym z typów będzie ciąg „Pliki”. |
| 4 |
dataTransfer.clearData () Usuwa dane z określonych formatów. Usuwa wszystkie dane, jeśli argument zostanie pominięty. |
| 5 |
dataTransfer.setData (format, dane) Dodaje określone dane. |
| 6 |
data = dataTransfer.getData (format) Zwraca określone dane. Jeśli nie ma takich danych, zwraca pusty ciąg. |
| 7 |
dataTransfer.files Zwraca FileList przeciąganych plików, jeśli takie istnieją. |
| 8 |
dataTransfer.setDragImage (element, x, y) Używa podanego elementu do aktualizacji informacji zwrotnych na temat przeciągania, zastępując wszelkie wcześniej określone opinie. |
| 9 |
dataTransfer.addElement (element) Dodaje podany element do lista elementów użytych do renderowania informacji zwrotnych dotyczących przeciągania. |
Proces przeciągania i upuszczania
Poniżej znajdują się kroki, które należy wykonać, aby zaimplementować operację przeciągania i upuszczania –
Krok 1 – Tworzenie obiektu do przeciągania
Oto kroki, które należy wykonać –
-
Jeśli chcesz przeciągnąć element, musisz ustawić atrybut draggable na true dla tego elementu.
-
Ustaw detektor zdarzeń dla dragstart that s niszczy przeciągane dane.
-
Odbiornik zdarzeń dragstart ustawi dozwolone efekty (kopiowanie, przenoszenie, link lub jakaś kombinacja).
Poniżej znajduje się przykład umożliwiający przeciąganie obiektu –
To da następujący wynik –
Krok 2 – Upuszczenie obiektu
Aby zaakceptować upuszczenie, cel upuszczenia musi nasłuchiwać co najmniej trzech zdarzeń.
-
Zdarzenie dragenter, które jest używane do określenia, czy cel upuszczenia ma zaakceptować upuszczenie, czy nie . Jeśli upuszczenie ma zostać zaakceptowane, to zdarzenie musi zostać anulowane.
-
Zdarzenie dragover, które służy do określenia, jakie informacje zwrotne mają być pokazane użytkownikowi. Jeśli zdarzenie zostanie anulowane, informacja zwrotna (zazwyczaj kursor) jest aktualizowana na podstawie wartości atrybutu dropEffect.
-
Wreszcie zdarzenie drop, które pozwala na faktyczne upuszczenie do wykonania.
Poniżej znajduje się przykład upuszczenia obiektu do innego obiektu –
To da następujący wynik –