Плъзгане на изображение - с помощта на Плъзгане и пускане в html 5, Блогът на Степан Костаневич

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

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

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

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

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

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

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

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

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

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

---