en.javascript.info/2-ui/3-event-details/4-mouse-drag-and-drop/2-drag-heroes/task.md
Ilya Kantor 5d1037cbd0 minor
2019-08-18 09:44:30 +03:00

20 lines
717 B
Markdown

importance: 5
---
# Drag superheroes around the field
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.
[demo src="solution"]