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"]