aby zdefiniować efekt upuszczania, należy wykonać następujące kroki:
5.1. Określanie dozwolonych efektów upuszczania dla przeciąganego elementu w jego obsłudze zdarzeń dragstart
używając właściwości effectAllowed we właściwości zdarzenia dataTransfer, definiujesz wszystkie efekty upuszczania, które mogą być zastosowane dla tego przeciąganego elementu.
jest to wykonywane, ponieważ różne miejsca upuszczania mogą być zdefiniowane i różne efekty upuszczania mogą być obsługiwane dla każdej lokalizacji upuszczania.,
poniższa tabela definiuje możliwe wartości właściwości effectAllowed na podstawie dokumentów MDN:
5.2. Dla każdej lokalizacji upuszczania Zdefiniuj efekt(y) upuszczania w funkcji obsługi zdarzenia przeciągania
do zdefiniowania efekt upuszczania musi być jednym z dozwolonych efektów określonych w funkcji obsługi zdarzenia dragstart w lokalizacji źródłowej.,
jeśli efekt upuszczania nie jest jednym z dozwolonych efektów upuszczania, zostanie on ustawiony na jeden z dozwolonych efektów upuszczania.
procedura przeciągania, w której powinien być zdefiniowany efekt upuszczania, jest wykonywana, gdy przeciągany element jest przeciągany w możliwym miejscu upuszczania.
poniżej przedstawiono przykład definiowania efektów upuszczania dla określonej lokalizacji upuszczania.
6) Definiowanie strefy upuszczania (lokalizacja upuszczania)
domyślnie żaden element w dokumencie HTML nie zezwala na upuszczanie., Można to jednak zmienić i aby element stał się strefą zrzutu, musi mieć:
obsługę zdarzenia ondragover, która jest wykonywana podczas przeciągania elementu nad tym elementem. W tej procedurze obsługi zdarzenia, efekt upuszczania lokalizacji upuszczania jest zdefiniowany jak wcześniej wspomniano w kroku 5.2.
Obsługa zdarzenia ondrop, która jest wykonywana, gdy przeciągany element jest upuszczany w lokalizacji / strefie przeciągania.
poniżej przedstawiono przykład definiowania elementu jako lokalizacji kropli.,
zarówno w procedurach przeciągania, jak i upuszczania, preventDefault() musi być wywołane, aby zezwolić na upuszczanie, ponieważ wskazuje, że upuszczanie jest dozwolone w tej lokalizacji.
jeśli kropla będzie dozwolona tylko w pewnych sytuacjach, w których używane są warunki, dodaj preventDefault tylko wtedy, gdy spełnione są warunki zezwalające na kroplę. Ma to na celu uniemożliwienie, aby element był strefą zrzutu, jeśli nie są spełnione warunki, w których upuszczanie nie powinno być dozwolone.,
odrzucenie kropli na podstawie typu danych drag we właściwości dataTransfer jest częstym przypadkiem. Poniższy przykład pokazuje, że zezwalając na upuszczanie tylko linków w elemencie drop zone, który ma funkcję przeciągania.
7) obsługuje spadek elementu
podczas zdarzenia upuść, dane przeciągnięcia powinny być przetwarzane. W tym celu jest stosowana metoda getData() we właściwości event dataTransfer.,
metoda getData() pobiera elementy przeciągania, ponieważ pobiera pojedynczy argument typu danych do pobrania i zwraca skojarzoną z nim wartość łańcuchową.
właściwości allowedEffect i dropEffect pomagają kontrolować informacje zwrotne, które zostaną przedstawione użytkownikowi.
Obsługa takich informacji zwrotnych jest obowiązkiem dewelopera i powinna być zaimplementowana w obsłudze zdarzenia drop. Na przykład pobranie elementu i dołączenie go do innego rodzica spowoduje jego przeniesienie, ale skopiowanie węzła spowoduje efekt kopiowania.,
Jeśli dla pojedynczej strefy upuszczania zdefiniowanych jest wiele efektów upuszczania, właściwość dropEffect powinna zostać użyta do określenia, która operacja przeciągania była pożądana dla danego zdarzenia upuszczania.
poniżej znajduje się przykład obsługi spadku.
czasami możesz obsługiwać różne typy tych samych danych, ale chcesz pobrać tylko najbardziej konkretny typ. Ilustruje to poniższy kod z MDN docs.,
8) Użyj zdarzenia dragend, aby sprawdzić, czy kropla powiodła się
pod koniec operacji przeciągania, Zdarzenie dragend zostanie wywołane w elemencie źródłowym. Zdarzenie zostanie wywołane niezależnie od tego, czy przeciągnięcie się powiodło się, czy zostało anulowane.
aby sprawdzić, czy operacja przeciągania powiodła się, wartość dropEffect można sprawdzić w następujący sposób:
Jeśli właściwość dropEffect ma wartość „none” w obsłudze zdarzenia dragend, oznacza to, że operacje przeciągania zostały anulowane.,
w przeciwnym razie wartość właściwości dropEffect jest operacją, która została pomyślnie wykonana.
Hmm, jak to jest przydatne?
element źródłowy może użyć tych informacji po udanej operacji przenoszenia, aby usunąć przeciągnięty element ze starej lokalizacji.
Demo na przeciąganie i upuszczanie elementu HTML & upuść
demo kodu na przeciąganie i upuszczanie elementu HTML
Uwaga: Możesz również sklonować Projekt z mojego Githuba tutaj.,
1) Detect the Drag & Drop Feature Support in Your Browser
Before using the HTML drag & drop API, add feature detection code to ensure browser support.
The following code is the feature detection code for the HTML drag & drop API from Modernizr.,
domyślnie żaden element w dokumencie HTML nie zezwala na upuszczanie. Można to jednak zmienić i aby element stał się strefą upuszczania, musi mieć:
obsługę zdarzenia ondragover, która jest wykonywana, gdy plik(y) jest/są przeciągane przez lokalizację upuszczania.
Obsługa zdarzenia ondrop, która jest wykonywana, gdy plik (y) jest / są upuszczane w miejscu upuszczania.,
jak podano w MDN docs:
zdarzenia dragstart i dragend nie są wywoływane podczas przeciągania pliku do przeglądarki z systemu operacyjnego.
poniżej przedstawiono przykład definiowania elementu jako lokalizacji kropli.
3) obsłuż upuszczenie pliku
gdy użytkownik upuści plik(y) w strefie upuszczania, zostanie wywołane zdarzenie upuszczania. Podczas zdarzenia upuść pliki powinny być przetwarzane zgodnie z życzeniem.,
aby uzyskać dostęp do każdego upuszczonego pliku, użyj właściwości DataTransfer zdarzenia, aby uzyskać dostęp do właściwości files. Po uzyskaniu dostępu do upuszczonego pliku użyj API plików, aby go przetworzyć.
jeśli przeglądarka obsługuje właściwość DataTransferItemList, można jej używać z metodą getAsFile() zamiast używać właściwości DataTransfer do dostępu do pliku.
zarówno w procedurach przeciągania, jak i upuszczania, preventDefault() musi być wywołane, aby zezwolić na upuszczanie, ponieważ wskazuje, że upuszczanie jest dozwolone w tej lokalizacji., Zapobiega to również otwieraniu pliku, co jest domyślnym zachowaniem występującym podczas upuszczania pliku na stronie internetowej.
jeśli kropla będzie dozwolona tylko w pewnych sytuacjach, w których używane są warunki, dodaj preventDefault tylko wtedy, gdy spełnione są warunki zezwalające na kroplę. Ma to na celu uniemożliwienie, aby element był strefą zrzutu, jeśli nie są spełnione warunki, w których upuszczanie nie powinno być dozwolone.
poniższy przykład, z MDN docs, pokazuje przetwarzanie upuszczonych plików, gdzie element przeciągania, który nie jest plikiem, jest ignorowany., Both possible ways are demonstrated in this
Demo on HTML Element’s Drag & Drop
Note: you can also clone the project from my Github here.
