HTML Academy · レッスン

draggable属性とdragstartイベント

Q: 「draggable属性とdragstartイベント」で何を学びますか？

要素をドラッグ可能にし、dragstartに対応します ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

要素をドラッグ可能にし、dragstartに対応します

「draggable属性とdragstartイベント」はCoddyKit上の無料HTML Academyレッスンです。これはレッスン1/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。

draggable属性

draggable="true"を設定すると、あらゆる要素がドラッグ元になります。リンクと画像はデフォルトでドラッグできますが、それ以外の要素（div、li、span）には明示的な属性が必要です。draggable="false"を設定すると、その要素はネイティブドラッグの対象外になります。

<div draggable="true" id="card">Drag me</div>

dragstartイベント

ユーザーがドラッグを開始すると、ドラッグ元の要素でdragstartが発生します。ここでドラッグを初期化します。移動する項目を記録し、必要に応じてスタイルを設定し、ドロップ先が読み取るデータをdataTransferオブジェクトに書き込みます。

card.addEventListener("dragstart", (e) => {
  e.dataTransfer.setData("text/plain", card.id);
});

dragstartがなければ何も起きない

要素をdraggableに設定しても、dragstartを処理しなければ、ブラウザはゴースト画像をドラッグするだけでデータを設定しません。そのため、ほとんどのドロップ先はドロップを拒否します。draggable属性には必ず、少なくとも識別子を保存するdragstartリスナーを組み合わせてください。

effectAllowedの設定

dragstart内でe.dataTransfer.effectAllowed = "move"を設定すると、操作を制限できます。指定できる値は「copy」、「move」、「link」、「copyMove」、「all」、「none」です。これによりブラウザが表示するカーソルと、後でドロップ先が設定できるdropEffectが決まります。

視覚的な手がかりを追加する

ドラッグ中にドラッグ元が薄暗く表示されるよう、CSSクラスを追加します。card.classList.add("dragging")のように記述してください。dragendイベントでクラスを削除すると、ドロップが成功した場合でもEscapeでキャンセルされた場合でもスタイルを解除できます。

カスタムドラッグ画像

デフォルトでは、ブラウザはドラッグ元の半透明のスナップショットをドラッグします。e.dataTransfer.setDragImage(node, offsetX, offsetY)で上書きできます。非表示のDOM要素またはImageを渡すと、カーソル位置にカスタムプレビューを表示できます。

const ghost = document.getElementById("drag-preview");
card.addEventListener("dragstart", (e) => {
  e.dataTransfer.setDragImage(ghost, 20, 20);
});

dragendイベント

dragendは、ドラッグが完了した後にドラッグ元で発生します。ドロップが成功した場合、無効なターゲットにドロップした場合、キャンセルした場合のいずれでも発生します。ドラッグ中クラスの削除、ゴーストプレビューの非表示、透明度の復元などの後処理に使用してください。

キャンセルを検出する

dragendの中でe.dataTransfer.dropEffectを確認してください。値が「none」なら、ドロップは発生していません（ターゲットに拒否された、ユーザーがEscapeを押した、ページ外にドロップしたなどの可能性があります）。それ以外の場合は、ドロップ先が選択した効果（「move」、「copy」、「link」）と一致します。

タッチデバイスでのドラッグ

ネイティブのドラッグ＆ドロップはデスクトップを前提としています。タッチデバイスでは、ポリフィルやPointer Eventsベースの代替実装なしではAPIはほとんど機能しません。モバイル対応の並べ替えUIには、両方のイベントモデルを抽象化するSortableJSやdnd-kitなどのライブラリを使用してください。

アクセシビリティに関する注意点

ネイティブのドラッグ＆ドロップはキーボードに対応していないため、キーボードだけを使うユーザーは項目を並べ替えられません。必ず代替手段を用意してください。矢印キーのハンドラー、上下移動ボタン、ariaで制御する並べ替えダイアログなどが使えます。ドラッグ＆ドロップは代替ではなく、機能を補うものにしてください。

ブラウザのデフォルト動作を無効にする

draggable要素内のテキスト選択がドラッグの妨げになることがあります。ドラッグ元にCSSのuser-select: noneと-webkit-user-drag: elementを適用し、内部のテキストを選択するのではなく要素自体をドラッグするようブラウザに指示してください。

理解度チェック

draggable="true"属性だけでも要素をドラッグ可能にできるのに、通常はなぜdragstartリスナーを追加する必要があるのですか？

まとめ

draggable="true"でドラッグ元を指定し、dragstartでdataTransferへのデータ設定、effectAllowedの設定、必要に応じたカスタムドラッグ画像の指定を行います。dragendと組み合わせてスタイルを解除してください。アクセシビリティのためにキーボード操作の代替手段を用意し、タッチ操作にはポリフィルの利用を検討してください。

よくある質問

「draggable属性とdragstartイベント」レッスンは無料ですか？

はい。「draggable属性とdragstartイベント」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。

「draggable属性とdragstartイベント」で何を学びますか？

要素をドラッグ可能にし、dragstartに対応しますブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

HTML Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン1/4です。

「draggable属性とdragstartイベント」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このHTML Academyレッスンでコードを書いて実行できますか？

はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← HTML Academyに戻る