HTML5ドラッグアンドドロップ（DnD）APIは、ページ上のほぼすべての要素をドラッグ可能にすることができることを意味します。この投稿では、ドラッグの基本について説明します。
ドラッグ可能なコンテンツの作成＃
ほとんどのブラウザでは、テキストの選択、画像、リンクはデフォルトでドラッグ可能であることに注意してください。たとえば、 Google検索のGoogleロゴにゴースト画像が表示されます。画像はアドレスバー、<input type="file" />要素、さらにはデスクトップにドロップできます。他の種類のコンテンツをドラッグ可能にするにはHTML5 DnDAPIを使用する必要があります。
オブジェクトをドラッグ可能にするには、その要素にdraggable=trueを設定します。ドラッグ対応の画像、ファイルはほぼすべてです。 、リンク、ファイル、またはページ上の任意のマークアップ。
この例では、CSSグリッドでレイアウトされたいくつかの列を再配置するためのインターフェースを作成しています。私の列の基本的なマークアップは次のようになります。これは、各列に
属性がtrueに設定されています。
これがコンテナ要素とボックス要素のCSSです。CSSは唯一であることに注意してください。 DnD機能に関連するのはcursor: moveプロパティです。残りのコードは、コンテナとボックス要素のレイアウトとスタイルを制御するだけです。
この時点で、次のようになります。アイテムをドラッグできることがわかりますが、他には何も起こりません。DnD機能を追加するには、JavaScriptAPIを使用する必要があります。
ドラッグイベントのリッスン＃
いくつかありますドラッグアンドドロッププロセス全体を監視するためにアタッチするさまざまなイベントの一覧。
-
dragstart -
drag -
dragenter -
dragleave -
dragover -
drop -
dragend
DnDフローを処理するには、何らかのソース要素（ドラッグが発生する場所）であるデータpaが必要です。 yload（ドロップしようとしているもの）とターゲット（ドロップをキャッチする領域）。ソース要素には、画像、リスト、リンク、ファイルオブジェクト、HTMLのブロックなどがあります。ターゲットはドロップゾーンです。 （またはドロップゾーンのセット）ユーザーがドロップしようとしているデータを受け入れます。すべての要素がターゲットになるわけではないことに注意してください。たとえば、画像をターゲットにすることはできません。
開始と終了ドラッグアンドドロップシーケンス＃
コンテンツにdraggable="true"属性を定義したら、dragstartイベントハンドラーをアタッチします各列のDnDシーケンスを開始します。
このコードは、ユーザーがドラッグを開始すると列の不透明度を40％に設定し、ドラッグイベントが終了すると100％に戻します。
結果は、以下のGlitchデモで確認できます。アイテムをドラッグすると不透明になります。dragstartイベントのターゲットはソース要素であるため、this.style.opacityを40％に設定すると、ユーザーは要素が移動中の現在の選択であるという視覚的なフィードバック。アイテムをドロップすると、ドロップ機能は配置されていませんが、ソース要素は100％の不透明度に戻ります。
dragenter、dragover、dragleaveを使用して視覚的な手がかりを追加します＃
ユーザーがインターフェースの操作方法を理解できるようにするには、dragenter、dragover、およびdragleaveイベントハンドラー。この例では、列はドラッグ可能であることに加えてドロップターゲットです。ユーザーを支援します。これを理解するには、ドラッグされたアイテムを列の上に保持するときに境界線を破線にします。たとえば、CSSで、ドロップターゲットである要素を表すoverクラスを作成できます。
次に、JでavaScriptはイベントハンドラーを設定し、列がドラッグされたときにoverクラスを追加し、離れるときに削除します。dragendハンドラーまた、ドラッグの最後でクラスを削除するようにします。
このコードでカバーする価値のあるポイントがいくつかあります。 ：
- リンクのようなものをドラッグする場合、そのリンクに移動するというブラウザのデフォルトの動作を防ぐ必要があります。これを行うには、iv id = “を呼び出します。
dragoverイベントのbe404848d3 “>
。別の良い方法は、同じハンドラーでfalseを返すことです。
dragoverの代わりに、dragenterイベントハンドラーを使用してoverクラスを切り替えます。 。dragoverを使用すると、イベントdragoverが列のホバーで引き続き発生するため、CSSクラスが何度も切り替えられます。最終的には、それは原因になりますブラウザのレンダラーは、大量の不要な作業を実行します。再描画を最小限に抑えることは、常に良い考えです。dragoverイベントを何かに使用する必要がある場合は、イベントリスナーの調整またはデバウンスを検討してください。ドロップの完了＃
実際のドロップを処理するには、dropイベントのイベントリスナーを追加します。dropハンドラーでは、次のことを防ぐ必要があります。ドロップに対するブラウザのデフォルトの動作。これは通常、ある種の迷惑なリダイレクトです。e.stopPropagation()を呼び出すことで、イベントがDOMをバブリングするのを防ぐことができます。
この時点でコードを実行すると、アイテムは新しい場所にドロップされません。これを実現するには、DataTransferオブジェクト。
dataTransferプロパティは、すべてのDnDマジックが発生する場所です。ドラッグアクションで送信されたデータを保持します。dataTransferはdragstartイベントで設定され、dropイベントで読み取り/処理されます。e.dataTransfer.setData(mimeType, dataPayload)を呼び出すと、オブジェクトを設定できます。 “s MIMEタイプとデータペイロード。
この例では、ユーザーが列の順序を並べ替えることができるようにします。これを行うには、最初にドラッグ時にソース要素のHTMLを保存する必要があります。開始：
dropイベントで処理します列のドロップ。ソース列のHTMLをドロップしたターゲット列のHTMLに設定します。最初に、ユーザーがドラッグ元の同じ列にドロップバックしていないことを確認します。
結果は次のデモになります。B列の上にA列をドラッグして放し、場所がどのように変化するかを確認します。
詳細プロパティのドラッグ＃
dataTransferオブジェクトはプロパティを公開して、ドラッグプロセス中にユーザーに視覚的なフィードバックを提供します。これらのプロパティを使用して、各ドロップターゲットの方法を制御することもできます。特定のデータ型に応答します。
-
dataTransfer.effectAllowed制限ユーザーが要素に対して実行できる「ドラッグのタイプ」を示します。これは、ドラッグアンドドロップ処理モデルで、iv id = “341301d4b8]中にdropEffectを初期化するために使用されます。 “>
およびdragoverイベント。プロパティは次の値に設定できます：none、copy、copyLink、copyMove、link、linkMove、move、all、およびuninitialized。
dataTransfer.dropEffectは、dragenterおよびdragoverイベント。ユーザーがターゲット要素にカーソルを合わせると、ブラウザのカーソルに、実行される操作のタイプが示されます（例：コピー、移動など）。効果は次のいずれかの値になります：none、copy、link、move。e.dataTransfer.setDragImage(imgElement, x, y)は、ブラウザを使用する代わりに、 sデフォルトの「ゴーストイメージ」フィードバック。オプションでドラッグアイコンを設定できます。ドラッグアンドドロップによるファイルのアップロード＃
この簡単な例では、列を両方として使用します。ドラッグソースとドラッグターゲット。これは、ユーザーがアイテムを再配置するように求められるUIで表示される場合があります。場合によっては、ユーザーが1つの画像を選択する必要があるインターフェイスなど、ドラッグターゲットとソースが異なる場合があります。選択した画像をターゲットにドラッグすることによる製品のメイン画像。
ドラッグアンドドロップは、ユーザーがデスクトップからアプリケーションにアイテムをドラッグできるようにするためによく使用されます。主な違いは、dropハンドラー。dataTransfer.getData()を使用してファイルにアクセスする代わりに、ファイルのデータwi dataTransfer.filesプロパティに含まれます：
これについての詳細は、カスタムドラッグアンドドロップで確認できます。