JavaScript ネイティブのドラッグ アンド ドロップについての深い理解について話します。

前の言葉

ドラッグ アンド ドロップ (DnD) は、実際にはドラッグ アンド ドロップの 2 つのアクションです。したがって、これには 2 つの要素が含まれます。 1 つはドラッグ アンド ドロップ ソースと呼ばれるドラッグされた要素で、もう 1 つはドラッグ アンド ドロップ ターゲットと呼ばれるドロップされるターゲットです。この記事ではネイティブドラッグアンドドロップをこの2つの概念に分けて詳しく紹介していきます

ドラッグアンドドロップソース

ドラッグアンドドロップソースとはどのような要素なのでしょうか？

HTML5 は、すべての HTML 要素に対してドラッグ可能属性を指定し、要素をドラッグできるかどうかを示します

画像とリンクのドラッグ可能属性は自動的に true に設定されますが、他の要素のこの属性のデフォルト値は false です

[注意] 有効にするには、draggable='true' を設定する必要があります。draggable を設定しただけでは機能しません。

デフォルトでは、テキストは選択されている場合にのみドラッグできますが、画像とリンクはいつでもドラッグできます。他の要素はドラッグ アンド ドロップできません

  链接可拖动 
元素不可拖动

要素に draggable 属性が設定されている場合、通常の要素もドラッグできます

互換性があります

IE9 ブラウザは draggable 属性をサポートしていませんが、それは可能ですマウスダウンイベントを通じてドラッグされる ハンドラーはドラッグ効果を達成するためにdragDrop()メソッドを呼び出します

[注]Firefoxにdraggable属性をサポートさせたい場合は、ondragstartイベントハンドラーを追加し、setData()を使用する必要がありますdataTransfer オブジェクトのメソッドを使用してエフェクトを開始します

ドラッグ アンド ドロップ イベント

ドラッグ アンド ドロップ ソースには 3 つのドラッグ アンド ドロップ イベントが含まれます。ソースをドラッグ アンド ドロップすると、dragstart、drag、dragend の 3 つのイベントが順番にトリガーされます

dragstart

マウス ボタンを押してマウスを動かし始めると、ドラッグされた要素で dragstart イベントがトリガーされます。このとき、カーソルは「配置できません」記号 (円の中にバックスラッシュがあります) に変わります。これは、要素をそれ自体に配置できないことを意味します

drag

ドラッグスタートイベントがトリガーされた後、ドラッグイベントはただちにトリガーされ、要素内でこのイベントはドラッグされている間トリガーされ続けます

dragend

ドラッグが停止すると (要素が有効な配置ターゲットに配置されているか、無効な配置ターゲットに配置されているかに関係なく)、ドラッグエンドイベントがトリガーされます

0
 

ドラッグターゲット

ドラッグターゲットとは、ドラッグされた要素がマウスボタンを放したときに配置されるターゲットを指します

ドラッグソースがドラッグターゲットにドラッグされると、dragenterそして、dragover が順番にトリガーされます そして、dragleave または Drop の 4 つのイベント

dragenter

要素がドロップターゲットにドラッグされている限り、dragenter イベントがトリガーされます

dragover

ドラッグされた要素がドロップ ターゲットの範囲内で移動し、連続的にドラッグオーバー イベントをトリガーします

dragleave

要素がドロップ ターゲットの外にドラッグされると、dragleave イベントがトリガーされます

drop

要素が配置された場合ドロップターゲットを指定すると、ドロップイベントがトリガーされます

[注意] Firefox ブラウジング ブラウザのドロップイベントのデフォルトの動作は、ドロップターゲットに配置された URL を開くことです。 Firefox が通常のドラッグ アンド ドロップをサポートするには、ドロップ イベントのデフォルトの動作をキャンセルする必要があります。デフォルトでは、ターゲット要素の配置は許可されていないため、ドロップ イベントは発生しません。デフォルトの動作がドラッグオーバーイベントとドラッグエンターイベントでブロックされている限り、許可されたドロップターゲットになり、ドロップイベントの発生を許可できます。このとき、カーソルは配置可能なシンボルになります

拖放源
 
拖放目标
 

ドラッグアンドドロップ操作時のデータ交換を実現するために、 の属性である dataTransfer オブジェクトを導入します。 dataTransfer オブジェクトには、要素をドラッグしてドロップ ターゲットにデータを転送するために使用されます。 getData() と setData() という 2 つの主なメソッドがあり、setData() によって保存された値を取得できます。 ）。 getData() メソッドの唯一のパラメータでもある setData() メソッドの最初のパラメータは、保存されたデータの種類を示す文字列です。値は「text」または「URL」です

IE は「text」のみを定義します。 「 」と「URL」は 2 つの有効なデータ型であり、HTML5 はこれを拡張してさまざまな MIME タイプを指定できるようにします。 HTML5では下位互換性を考慮して「text」と「URL」もサポートしていますが、この2種類は「text/plain」と「text/uri-list」にマッピングされます

実際にはdataTransferオブジェクトが利用可能です各 MIME タイプは値を保持します。つまり、このオブジェクトにテキストと URL を同時に保存しても問題ありません

【注意】dataTransfer オブジェクトに保存されたデータは、drop イベントハンドラーでのみ読み込むことができます

一方テキストのドラッグ ボックス内のテキストをドラッグすると、ブラウザは setData() メソッドを呼び出して、ドラッグしたテキストを dataTransfer オブジェクトに「テキスト」形式で保存します。同様に、リンクまたは画像をドラッグ アンド ドロップすると、setData() メソッドが呼び出され、URL が保存されます。次に、これらの要素がドロップ ターゲットにドラッグ アンド ドロップされると、getData() を通じてデータを読み取ることができます。将来使用するためにデータを転送したい

请将从这堆内容不同乱七八糟的文字中挑选一些移动到拖放目标中
 
拖放目标
 
 

上記は編集者によって紹介された JavaScript ネイティブのドラッグ アンド ドロップです。ご質問がございましたら、メッセージを残してください。編集者がすぐに返信します。また、PHP 中国語 Web サイトをサポートしていただきありがとうございます。

JavaScript ネイティブのドラッグ アンド ドロップをさらに詳しく理解するには、PHP 中国語 Web サイトの関連記事に注目してください。