ポインタに対する要素の初期のずれを維持するようが良いでしょう。ボールの端でドラッグを開始する場合、ドラッグ中のカーソルは端のままであるべきです。カーソルからボールの左上端の距離を覚えることができます。私たちはドラッグの間その距離を維持する必要があります。相対的な座標を取得するメソッドがないことに注意してください。そのため、ここではウィンドウに相対的な座標を使っています。次に、ドラッグの間はこのようにして、ポインタに相対的な同じシフトにボールを置きます。ボールをドロップする。中):ボールの右下端でドラッグをする場合に、違いは特に顕著になります。今は現在の位置からのなめらかにカーソルを追うことができます。ドロップすることができました。実際には、通常1つの要素を取り、別の要素へそれをドロップします。ファイルをフォルダに、またはユーザをゴミ箱に、などです。要素上にドロップします。対応するアクションを行ったり、できれば、ドラッグ処理中にそれを強調表示したりします。そのソリューションは興味深くもあり難解でもあるため、ここで説明しましょう。ハンドラを設定し、マウスポインタがその上に現れたときに検出するやり方です。すると、その要素上でドラッグ/ドロップしていることが分かります。問題は、私たちがドラッグしている間、ドラッグ可能な要素は常に他の要素の上にあることです。マウスイベントは最上位の要素でのみ発生し、下位の要素では発生しません。要素があり、青の上に赤があります。この場合、赤は最上位であるため、青要素のイベントをキャッチする手段はありません。red!')"></div>ドラッグ可能な要素も同じです。ボールは常に他の要素の上にあるため、そこでイベントが発生します。下位の要素でどんなハンドラを設定しても、それらは動作しません。いう訳で、ドロップ可能要素にハンドラを置くと言う最初のアイデアは実践では上手くいきません。それらは実行されないでしょう。言うメソッドがあります。任意のマウスイベントハンドラで、ポインタの下のドロップ可能要素を検出することができます。呼び出しの前に、ボールを隠す必要があります。確認することができます。それが起きるとドロップを処理します。}}下の例では、ボールがサッカーゴールにドラッグされたとき、ゴールが強調表示されます。あり、強調表示やその他のことをするのに使うことができます。5スライダーを作ってください:マウスで青いハンドルをドラッグして移動させてください。重要な詳細:マウスボタンが押されたとき、ドラッグ中にマウスがスライダーの上下に行く可能性があります。スライダーはそれでも動作します(ユーザには便利です)。マウス左右に非常に速く移動する場、ハンドルは正確に端で止まります。タスクのためのサンドボックスを開く解答ここでは、水平なドラッグ&ドロップです。スライダーに相対的な座標を使います。使うよりもより便利です。いくつかの側面に対する理解度チェックに役立ちます。クラス(ドラッグ可能)を持つすべての要素を作成してください。このチャプターのボールのように。対する単一のイベントハンドラを使います。つづけてドラッグができるようページをスクロールします。水平スクロールはありません。ドラッグ可能な要素は、マウスをすばやく移動した後でもウィンドウからは離れません。デモは大きすぎてここには収まらないため、リンクにします。これにより座標が管理しやすくなります。使ってスクロールします。詳細は、コードにあるコメントを見てください。サンドボックスで解答を開く前のレッスン次のレッスンシェアチュートリアルマップコメントコメントをする前に読んでください...自由に記事への追加や質問を投稿をしたり、それらに回答してください。タグを使ってください。codepen...)。記事の中で理解できないことがあれば、詳しく説明してください。Kantorプロジェクトについてコンタクト。