フィールドの周りのスーパーヒーローをドラッグします
重要性: 5
このタスクは、ドラッグアンドドロップとDOMのいくつかの側面の理解を確認するために役立ちます
クラスdraggableを持つすべての要素を、ボールのようにドラッグ可能にします。
要件
- ドラッグ開始を追跡するためにイベント委譲を使用します:
mousedownのdocument上で単一のイベントハンドラー - 要素がウィンドウの上端/下端にドラッグされた場合、ページは上下にスクロールしてさらにドラッグできるようにします
- 水平スクロールはありません（これによりタスクが少し簡単になり、追加するのは簡単です)
- ドラッグ可能な要素またはその部分は、マウスをすばやく動かした後でも、ウィンドウから外れることはありません
デモはここに収まるには大きすぎるので、リンクを次に示します
要素をドラッグするにはposition:fixedを使用できます。これにより、座標を管理しやすくなります。最後に、position:absoluteに戻して、要素をドキュメントに配置する必要があります。
座標がウィンドウの上端/下端にある場合は、window.scrollToを使用してスクロールします
詳細はコードのコメントにあります