→ BlogGood.ru ←

Плъзнете и пуснете изображение - използвайте плъзгане и пускане в html 5

Така че, вижте персонализираните събития за плъзгане и пускане, които са добавени в HTML5:

Сега нека се опитаме да използваме всички събития на практика.

Етап 1 - поле с плъзгане и пускане

Първо, нека създадем блок, където ще влачим елементите:

Както можете да видите, добавих „id“ към блока с името „box“. Това не е важно, но за да нямате излишни въпроси, правете всичко по същия начин.

Събития трябва да се добавят към същия блок:

Какви събития използвахме?

- ondragenter - ще бъде изпълнено, когато изтегленият елемент се задържи над елемента, който може да го получи;
- ondrop - ще бъде изпълнено, когато влаченият елемент се премести в приемащия го елемент;
- ondragover - ще бъде изпълнено, когато изтегленият елемент се движи в рамките на елемента, който може да го получи.

Ето пълен пример:

За да направим полето за плъзгане видимо за нашите очи, нека добавим няколко стила към CSS:

Етап 2 - елементи за плъзгане и пускане

Ще имам изображения за плъзгане и пускане:

Моля, обърнете внимание, че съм задал уникален идентификатор за всяка снимка, така че и вие трябва да направите същото.
Запишете събитие за всяка снимка:

Какви събития използвахме?

- плъзгане Е атрибут, който задава способността за плъзгане на елемент.
"Плъзгане" има две значения:
вярно - този елемент може да се влачи
невярно - този елемент не може да се влачи
- ondragstart - изпълнява се, когато плъзгащият обект е стартиран (потребителят е натиснал бутона на мишката и е започнал да плъзга обекта).

Всичко е готово! Погледнете резултата (плъзнете картината в сивия правоъгълник):

Вероятно нямате търпение да видите резултата:

Това е всичко, което исках да говоря за плъзгане и пускане на елементи с HTML5.
Опитайте да потърсите в Интернет за повече информация.
Успех на всички!