HTML5のドラッグ&ドロップAPIを使おう

クズども · 2022年4月26日 10:30:50に投稿

HTML5のドラッグ&ドロップ(DnD)APIにより、ページ上のほぼすべての要素がドラッグ可能になります。この記事では、ドラッグ&ドロップの基本を解説します。

ドラッグ可能なコンテンツを作成

ほとんどのブラウザでは、テキスト選択、画像、リンクはデフォルトでドラッグ可能です。例えば、Google検索でGoogleロゴをドラッグすると、ゴースト画像が表示されます。画像はアドレスバー<input type="file" />要素、あるいはデスクトップにドラッグ&ドロップできます。他の種類のコンテンツをドラッグ可能にするには、HTML5のDnD APIを使う必要があります。

オブジェクトをドラッグ可能にするには、ドラッグ可能=真。ドラッグは、画像、ファイル、リンク、ファイル、またはページ上のあらゆるマークアップを含むほぼすべての要素に対応可能です。

例では、CSSグリッドでレイアウトされた列の並び替えインターフェースを作成します。これらの列の基本的なマークアップは以下の通りで、各列でドラッグ可能なプロパティがtrueに設定されています。

ログインが見えます。

こちらが私のコンテナとボックス要素のCSSです。 DnDの機能に関連する唯一のCSSはカーソル:moveプロパティだけです。残りのコードはコンテナとボックス要素のレイアウトとスタイルのみを制御します。

ログインが見えます。

この時点で、アイテムをドラッグすることはできますが、それ以外は何も起こりません。 DnDの機能を追加するにはJavaScript APIを使う必要があります。

ドラァグイベントのご注目ください

ドラッグ&ドロッププロセス全体を監視するために、さまざまなイベントを接続することができます。

ドラッグスタート
ドラッグ
ドラジェンター
ドラッグリーブ
ドラグオーバー
落とす
ドラゲンド

DnDストリームを処理するには、何らかのソース要素(ドラッグの開始点)、データペイロード(配置しようとしているもの)、ターゲット(スナップ配置のエリア)が必要です。ソース要素は画像、リスト、リンク、ファイルオブジェクト、HTMLブロックなどが含まれます。目標は、ユーザーが配置しようとしているデータのドロップゾーン(または複数のドロップゾーン)を受け入れることです。すべての要素が目標になれるわけではないことを覚えておいてください。例えば、画像は目標にはなりません。

ドラッグ&ドロップシーケンスの開始と終了

コンテンツにdraggable="true"プロパティを定義した後、各列のDnDシーケンスを開始するドラッグスタートイベントハンドラを付けます。

このコードは、ユーザーがドラッグを始めると列の不透明度を40%に設定し、ドラッグイベントの最後に100%に戻します。

ログインが見えます。

その結果は以下のグリッチデモで確認できます。アイテムをドラッグすると不透明になります。ドラッグスタートイベントは元の要素をターゲットにするため、this.style.opacityを40%に設定すると、現在選択されている要素が動いていることをユーザーに視覚的にフィードバックできます。アイテムが配置されると、ソース要素は100%の不透明度に戻りますが、配置関数はまだ書き込まれていません。

Dragenter、Dragoover、Dragleaveを使って追加の視覚的な手がかりを追加してください

ユーザーがインターフェースとのやり取りを理解できるように、dragenter、dragover、dragleaveイベントハンドラを使いましょう。以下の例では、列をドラッグしたりターゲットにしたりできます。ユーザーが分かりやすくするために、アイテムをカラムの横にドラッグすると、そのカラムの境界線が点線になります。例えば、CSSで配置ターゲットとなる要素を表すオーバークラスを作成できます:

ログインが見えます。

次に、JavaScriptでイベントハンドラを設定し、カラムを横にドラッグするときにオーバークラスを追加し、離れるときに削除します。ドラグエンドハンドラーでは、ドラッグの終了時にクラスが削除されることも確認したいです。

ログインが見えます。

このコードにはいくつか注意すべき点があります:

リンクなどの要素をドラッグする際は、ブラウザのデフォルトの動作、つまりそのリンクに移動する動作をブロックする必要があります。これを行うには、dragoverイベントでe.preventDefault()を呼び出します。もう一つの良い方法は、同じハンドラー内でfalseを返すことです。
クラスの切り替えにはdragenterイベントハンドラを使い、ドラグオーバーは使いません。ドラゴバーを使うと、カラムがホバーするたびにイベントドラゴバーがトリガーされるため、CSSクラスが複数回トグルされます。最終的には、ブラウザのレンダラーが多くの不要な作業をすることになります。できるだけ描き直すのが最善です。もし何らかの理由でドラゴバーイベントを使う必要があるなら、イベントリスナーを制限または削除することを検討してください。

配置を終えてください

実際の配置を処理するために、ドロップイベント用のイベントリスナーを追加してください。ドロップハンドラーでは、ブラウザのデフォルトの配置動作をブロックする必要があります。これは通常、面倒なリダイレクトのようなものです。 e.stopPropagation() はイベントがDOMをトリガーするのを防ぐために呼び出すことができます。

ログインが見えます。

新しいハンドラーをもう一方のハンドラーに登録することを確認してください:

ログインが見えます。

このタイミングでコードを実行すると、プロジェクトは新しい場所に配置されません。これを実現するにはDataTransferオブジェクトを使う必要があります。

dataTransferプロパティは、すべてのDnDの奇跡が起こる場所です。ドラッグ操作で送信されたデータ断片を保存します。 dataTransferはドラッグスタートイベントで設定され、ドロップイベントで読み込み・処理されます。 e.dataTransfer.setData(mimeType, dataPayload)を呼び出して、オブジェクトのMIME型とデータペイロードを設定します。

以下の例では、ユーザーが列の順序を並べ替えることができます。これを行うには、まずドラッグの最初にソース要素のHTMLを格納する必要があります:

ログインが見えます。

ドロップイベントでカラムの配置を処理し、ソースカラムのHTMLをターゲットカラムのHTMLに設定し、まずユーザーがドラッグ&ドロップしたターゲットカラムがソースカラムと同じか確認してください。

ログインが見えます。

抗力特性が増えました

dataTransferオブジェクトは、ドラッグプロセス中にユーザーに視覚的フィードバックを提供するために使われるプロパティを公開します。これらのプロパティは、各配置ターゲットが特定のデータ型にどのように応答するかを制御するためにも利用できます。

dataTransfer.effectAllowed は、ユーザーが要素に対して行える「ドラッグの種類」を制限します。ドラッグ&ドロップ処理モデルで、ドラジェンターやドラッグオーバーイベント中にdropEffectを初期化するために使われます。このプロパティは以下の値に設定できます:none、copy、copyLink、copyMove、link、linkMove、move、all、uninitialized。
dataTransfer.dropEffectは、DragenterおよびDragoverイベント中にユーザーに提供されるフィードバックを制御します。ユーザーがターゲット要素にカーソルを合わせると、ブラウザのカーソルが実行すべき動作の種類(例:コピー、移動など)を示します。効果は以下のいずれかの数値でできます:なし、コピー、リンク、移動。
e.dataTransfer.setDragImage(imgElement, x, y)は、ブラウザのデフォルトの「ゴースト画像」フィードバックが使われておらず、代わりにドラッグアイコンを設定するオプションがあることを示します。

ドラッグ&ドロップでファイルをアップロードします

以下の簡単な例では、列をドラッグソースおよびドラッグターゲットとして使います。これはUIでアイテムの並び替えを求める際に確認できます。場合によっては、ターゲットのドラッグとソースのドラッグが異なる場合があり、例えばユーザーが選択した画像をターゲットにドラッグして製品のメイン画像として画像を選択する必要があるインターフェースなどです。

ドラッグ&ドロップは、デスクトップからアプリにアイテムをドラッグできるようによく使われます。主な違いはドロップハンドラーです。 dataTransfer.getData() を使ってファイルにアクセスしない場合、ファイルのデータは dataTransfer.files プロパティに含まれています:

ログインが見えます。

元のリンク:ハイパーリンクのログインが見えます。

トビウオ · 2022年4月26日 21:27:25に投稿

学ぶことを...

ズモリ775 · 2022年4月29日 09:22:14に投稿

ボスの新しいスキル、学びに来て

[HTML/HTML5] HTML5のドラッグ&ドロップAPIを使おう

関連記事

閲覧したセクション