Вернуться к уроку

Расставить супергероев по полю

важность: 5

В этой задаче вы можете проверить своё понимание сразу нескольких аспектов Drag’n’Drop.

Сделайте так, чтобы элементы с классом draggable можно было переносить мышкой. По окончании переноса элемент остаётся на том месте в документе, где его положили.

Требования к реализации:

  • Должен быть 1 обработчик на document, использующий делегирование.
  • Если элементы подносят к вертикальным краям окна – оно должно прокручиваться вниз/вверх.
  • Горизонтальной прокрутки в этой задаче не существует.
  • Элемент при переносе, даже при резких движениях мышкой, не должен попасть вне окна.

Футбольное поле в этой задаче слишком большое, чтобы показывать его здесь, поэтому откройте его, кликнув по ссылке ниже. Там же и подробное описание задачи (осторожно, винни-пух и супергерои!).

Демо в новом окне

Открыть песочницу для задачи.

В решении этой задачи для переноса мы используем координаты относительно окна и position:fixed. Так проще.

А по окончании – прибавляем прокрутку и делаем position:absolute, чтобы элемент был привязан к определённому месту в документе, а не в окне. Можно было и сразу position:absolute и оперировать в абсолютных координатах, но код был бы немного длиннее.

Детали решения расписаны в комментариях в исходном коде.

Открыть решение в песочнице.