돌아가기
이 글은 다음 언어로만 작성되어 있습니다. English, 日本語, Русский, Türkçe, 简体中文. 한국어 번역에 참여해주세요.

Drag superheroes around the field

중요도: 5

This task can help you to check understanding of several aspects of Drag’n’Drop and DOM.

Make all elements with class draggable – draggable. Like a ball in the chapter.

Requirements:

  • Use event delegation to track drag start: a single event handler on document for mousedown.
  • If elements are dragged to top/bottom window edges – the page scrolls up/down to allow further dragging.
  • There is no horizontal scroll (this makes the task a bit simpler, adding it is easy).
  • Draggable elements or their parts should never leave the window, even after swift mouse moves.

The demo is too big to fit it here, so here’s the link.

새 창에서 데모 보기

샌드박스를 열어 정답을 작성해보세요.

To drag the element we can use position:fixed, it makes coordinates easier to manage. At the end we should switch it back to position:absolute to lay the element into the document.

When coordinates are at window top/bottom, we use window.scrollTo to scroll it.

More details in the code, in comments.

샌드박스를 열어 정답을 확인해보세요.