HTML5 - przeciągnij i upuść, część 2

Już w pierwszej części tego samouczka widzieliśmy, jak uruchomić przeciągnij wydarzenie przeciągania elementów, czyli wykonaliśmy część pracy, widzieliśmy, jak wchodzić w interakcje z różnymi wydarzeniami z tej pierwszej sekcji.
Teraz musimy wiedzieć, jak aktywować obszar, w którym należy zdeponować element, jest to już akcja uzupełniająca, która pozwoli nam osiągnąć pełne funkcjonalności na naszej stronie.
Tworzenie obszaru depozytowego
To jest obszar, w którym zamierzamy zostawić elementy, które przeciągamy, aby manipulować tym obszarem, będziemy mieć kilka zdarzeń, aby lepiej zrozumieć, jak obsługiwać te zdarzenia, wymienimy każde z nich i wyjaśnimy, jak to działa .
Wydarzenia (edytuj)

• Dragenter: Aktywuje się, gdy przeciągnięty element wejdzie w przestrzeń na ekranie, którą zdefiniowaliśmy dla obszaru złoża.
• Dragover: Jest on wyzwalany, gdy przeciągany element porusza się w obszarze złoża, który już zdefiniowaliśmy.
• Dragleave: Aktywuje się w momencie, gdy przeciągnięty element opuści obszar złoża.
• Upuszczać: Jest to wydarzenie, które jest aktywowane, gdy przedmiot zostanie pozostawiony w strefie depozytu.

Otrzymanie przedmiotu
Gdy już wiemy, jakimi zdarzeniami dysponujemy, zbudujemy prosty kod, w którym upuszczając lub deponując przeciągnięty przez nas element, wyświetla się on w obszarze depozytu.
W tym celu wykorzystamy niektóre funkcje wewnętrzny HTML gdzie zamierzamy sklonować element, który zostanie wrzucony w obszar.
Zobaczmy przykładowy kod:

 Przykład  
Upuść tutaj

Jeśli przyjrzymy się uważnie, zdefiniujemy element docelowy jako element, który będzie zawierał obszar złoża, po wykonaniu tego określamy, co będzie się działo w każdym ze zdarzeń, jeśli spojrzymy na upuść wydarzenie to miejsce, w którym następuje ostatni krok, tutaj sklonujemy przeciągnięty element i dzięki wewnętrzny HTML pokażemy to asynchronicznie, gdy upuścimy element, który przeciągaliśmy.
Kolejną rzeczą, na którą musimy zwrócić uwagę, jest nadpisanie domyślnego zdarzenia przeglądarki, zarządzamy tym podczas tworzenia funkcji uchwytPrzeciągnijW ten sposób uniemożliwiamy przeglądarce zinterpretowanie instrukcji w sposób, którego nie oczekujemy.
W naszej przeglądarce powinno to wyglądać tak:

W końcu udało nam się zrobić przeciągnij i upuść w HTML5 bez uzależnienia od zewnętrznych bibliotek, teraz przy odrobinie wyobraźni możemy wykonać wiele funkcjonalności, np. koszyk, który działa tylko z przeciągnij i upuść.Podobał Ci się i pomógł ten samouczek?Możesz nagrodzić autora, naciskając ten przycisk, aby dać mu pozytywny punkt