フィールドの周りでスーパーヒーローをドラッグする
重要性: 5
このタスクは、ドラッグ&ドロップや DOM のいくつかの側面に対する理解度チェックに役立ちます。
draggable クラス(ドラッグ可能)を持つすべての要素を作成してください。このチャプターのボールのように。
要件:
- ドラッグ開始を追跡するのに、イベント移譲を使ってください:
documentでmousedownに対する単一のイベントハンドラを使います。 - 要素がウィンドウの上下の端にドラッグされた場合、-- つづけてドラッグができるようページをスクロールします。
- 水平スクロールはありません。
- ドラッグ可能な要素は、マウスをすばやく移動した後でもウィンドウからは離れません。
デモは大きすぎてここには収まらないため、リンクにします。
要素をドラッグするために、 position:fixed を使います。これにより座標が管理しやすくなります。最後には、それを position:absolute に戻す必要があります。
その後、座標がウィンドウの上下端にある場合、window.scrollTo を使ってスクロールします。
より詳細は、コードにあるコメントを見てください。