ドラッグイベントの HTML5 説明ragstart、drag、dragend

巴扎黑

リリース： 2017-08-10 10:51:24

オリジナル

12293 人が閲覧しました

[はじめに] ドラッグアンドドロップイベントドラッグアンドドロップイベントを通じて、ドラッグアンドドロップのさまざまなことを制御できます。どの要素またはどこでドラッグイベントが発生するかが最も重要です。一部のイベントはドラッグされた要素で発生し、一部のイベントはドロップターゲットで発生します。要素をドラッグすると、トリガーされるイベントは次のとおりです:

ドラッグイベント

ドラッグイベントを通じて、さまざまなもののドラッグを制御できます。どの要素またはどこでドラッグイベントが発生するかが最も重要です。一部のイベントはドラッグされた要素で発生し、一部のイベントはドロップターゲットで発生します。要素がドラッグされると、dragstart イベント、drag イベント、dragend イベントがトリガーされるイベントです。

マウスボタンを押してマウスを動かし始めると、ドラッグされた要素でdragstartイベントがトリガーされます。この時点で、カーソルが「配置できません」記号 (円の中にバックスラッシュがある) に変わり、要素を独自のドアに配置できないことを示します。ドラッグが開始されると、ondragstart イベントハンドラーを通じて JavaScript コードを実行できます。

dragstart イベントがトリガーされると、すぐにドラッグイベントがトリガーされ、要素がドラッグされている間、ドラッグイベントはトリガーされ続けます。このイベントは、mousemove イベントおよび touchmove イベントに似ています。ドラッグが停止すると (要素が有効なドロップターゲットに配置されたか無効なドロップターゲットに配置されたかに関係なく)、dragend イベントが発生します。

上記の 3 つのイベントのターゲットは、すべてドラッグされた要素によってトリガーされます。デフォルトでは、ブラウザはドラッグ中にドラッグされた要素の外観を変更しません。ただし、自分で変更することもできます。ただし、ほとんどのブラウザは、ドラッグされている要素の半透明のコピーを作成し、常にカーソルに追従します。要素が有効なドロップターゲットにドラッグされると、dragenter イベント、dragover イベント、dragleave またはdrop イベントがトリガーされます。

要素がドロップターゲットにドラッグされている限り、dragenter イベント (mouseover イベントと同様) がトリガーされます。これにドラッグオーバーイベントが続き、ドラッグされた要素がドロップターゲットの範囲内でまだ移動している場合、ドラッグオーバーイベントが継続的にトリガーされます。要素がドロップターゲットからドラッグされると、dragover イベントは発生しなくなりますが、dragleave イベントがトリガーされます (mouseout イベントと同様)。要素がドロップターゲットに配置されると、dragleave イベントの代わりに Drop イベントがトリガーされます。ドラッグエンターイベント、ドラッグオーバーイベント、およびドラッグリーブまたはドロップイベントのターゲットは、すべてドロップターゲットとして機能する要素です。

カスタム配置ターゲット

要素をドラッグして無効な配置ターゲットを越えると、配置できないことを示す特別なマウスジェスチャ (円の中のバックスラッシュ) が表示されます。すべての要素はドロップターゲットイベントをサポートしていますが、これらの要素はデフォルトではドロップできません。ドロップが許可されていない要素を越えて要素がドラッグされた場合、ユーザーが何をしても、ドロップイベントは発生しません。ただし、dragenter イベントとドラッグオーバーイベントのデフォルトの動作をオーバーライドすることで、任意の要素を有効なドロップターゲットにすることができます。

デフォルトの動作をオーバーライドすると、要素をドロップターゲットにドラッグすると、カーソルが配置を可能にするシンボルに変わることがわかります。 Firefox 3.5 以降では、ドロップイベントのデフォルトの動作は、ドロップターゲットにドロップされた URL を開きます。画像をドロップターゲットにドラッグすると、ページは画像ファイルにリダイレクトされます。テキストをドロップターゲットにドラッグアンドドロップすると、無効な URL エラーが発生します。したがって、Firefox が通常のドラッグアンドドロップをサポートするには、ドロップイベントのデフォルトの動作をキャンセルし、ドラッグされた要素の URL が開かれないようにする必要があります。小さな例は次のとおりです

HTML コード