Съдържание
Още в първата част на този урок видяхме как да започнем плъзгане на събитие на плъзгане на елементите, тоест ние свършихме част от работата, видяхме как да взаимодействаме с различните събития от този първи раздел.Сега трябва да знаем как да активираме областта, където да депозираме елемента, това вече е допълващото действие, което ще ни позволи да постигнем пълни функционалности на нашата страница.
Създаване на депозитна зона
Това е областта, в която ще оставим елементите, които влачим, за да манипулираме тази област, ще имаме няколко събития, за да разберем по -добре как да се справим с тези събития, ще изброим всяко едно и ще обясним как работи .
Събития (редактиране)
- Dragenter: Активира се, когато плъзгащ се елемент влезе в пространството на екрана, което сме определили за зоната за депозиране.
- Драговер: Той се задейства, когато плъзгащият се елемент се движи в рамките на вече дефинираната област на депозит.
- Драглейв: Активира се в момента, в който плъзгащият се елемент напуска зоната за депозиране.
- Изпускайте: Това е събитието, което се активира, когато елемент е оставен в зоната за депозиране.
След като знаем какви събития имаме на разположение, ще изградим прост код, в който при пускане или депозиране на елемент, който сме плъзгали, той се показва в зоната за депозиране.
За това ще използваме някои функции на вътрешен HTML където ще клонираме елемента, който е хвърлен в областта.
Нека да видим примерния код:
Пример
Пусни тук
Ако се вгледаме внимателно, дефинираме целевия елемент като елемент, който ще съдържа зоната за депозиране, след като това стане, ние определяме какво ще се случи във всяко от събитията, ако погледнем събитие за отпадане е мястото, където се случва последната стъпка, тук ще клонираме плъзгащия се елемент и благодарение на вътрешен HTML ще го покажем асинхронно, когато изпуснем елемента, който сме плъзгали.
Друго нещо, на което трябва да обърнем внимание, е да презапишем събитието по подразбиране на браузъра, което управляваме при създаването на функцията дръжкаПо този начин ние предотвратяваме браузъра да тълкува инструкциите по начин, който не се очаква от нас.
В нашия браузър трябва да изглежда така:
