Přetahujte superhrdiny po hřišti
důležitost: 5
Tato úloha vám pomůže ověřit si, zda jste porozuměli některým aspektům přetahování a DOMu.
Učiňte všechny elementy s třídou přetahovatelný přetahovatelnými, stejně jako míč v článku.
Požadavky:
- Pro sledování začátku přetahování použijte delegování událostí: jediný handler událostí na
documentpromousedown. - Když jsou elementy přetahovány k hornímu nebo dolnímu okraji okna, stránka roluje nahoru nebo dolů, aby umožnila další přetažení.
- Není zde vodorovné rolování (aby byla úloha trochu jednodušší, je snadné ho pak přidat).
- Přetahovatelné elementy nebo jejich části by nikdy neměly opustit okno, ani při rychlém pohybu myší.
Demo je příliš velké a nevejde se sem, proto dáváme jen odkaz.
Pro přetažení elementu můžeme použít position:fixed, se souřadnicemi se pak jednodušeji pracuje. Na konci bychom měli přepnout zpět na position:absolute, abychom element umístili do dokumentu.
Když jsou souřadnice na horním nebo dolním okraji okna, použijeme k rolování window.scrollTo.
Další podrobnosti najdete v kódu v komentářích.