ドラッグ中の視覚的フィードバック
ドラッグ操作中の要素のスタイルを設定します。
「ドラッグ中の視覚的フィードバック」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。
視覚的なフィードバックが重要な理由
適切なドラッグ＆ドロップでは、どの項目が移動しているか、どこに配置できるか、ドロップが有効かどうかをユーザーに伝えます。フィードバックがないと、操作が壊れているように感じられます。
ドラッグ中の項目をスタイル設定する
dragstart でソースを暗くしたり縮小したりすると、ユーザーはどの項目を選択したかを確認できます。
item.addEventListener("dragstart", () => item.classList.add("is-dragging"));
item.addEventListener("dragend", () => item.classList.remove("is-dragging"));dragenter イベント
ドラッグ中の項目がドロップ候補のターゲットに入ると、dragenter が発生します。これを使ってゾーンを強調表示します。
zone.addEventListener("dragenter", (e) => {
e.preventDefault();
zone.classList.add("drag-over");
});dragleave イベント
項目がターゲットから離れると、dragleave が発生します。ここで強調表示を解除します。
zone.addEventListener("dragleave", () => {
zone.classList.remove("drag-over");
});ちらつきの問題
dragenter と dragleave は子要素に対しても発生するため、ちらつきが起こります。カウンターまたは relatedTarget のチェックを使うと、強調表示を安定させられます。
let depth = 0;
zone.addEventListener("dragenter", () => { depth++; zone.classList.add("drag-over"); });
zone.addEventListener("dragleave", () => { depth--; if (depth === 0) zone.classList.remove("drag-over"); });ドロップ時にリセットする
ドロップに成功したときは dragleave が発生しない場合があるため、必ず drop ハンドラーで強調表示の状態を解除してください。
zone.addEventListener("drop", (e) => {
e.preventDefault();
depth = 0;
zone.classList.remove("drag-over");
});ドラッグ画像をカスタマイズする
dragstart で setDragImage(element, offsetX, offsetY) を使うと、デフォルトのゴースト画像を任意の要素に置き換えられます。
item.addEventListener("dragstart", (e) => {
const ghost = document.getElementById("custom-ghost");
e.dataTransfer.setDragImage(ghost, 20, 20);
});dropEffect でカーソルを設定する
コピーを示すプラス記号、移動矢印、ドロップ不可を示すカーソルは、dragover で設定する dropEffect によって決まります。無効なドロップは "none" で拒否してください。
zone.addEventListener("dragover", (e) => {
e.preventDefault();
e.dataTransfer.dropEffect = canAccept ? "move" : "none";
});ドロッププレースホルダーを表示する
並べ替え可能なリストでは、予測されるドロップ位置にプレースホルダー要素を挿入すると、項目が実際にどこへ配置されるかをユーザーに正確に示せます。
function showPlaceholder(beforeEl) {
list.insertBefore(placeholder, beforeEl);
}挿入位置を計算する
ポインターの Y 座標を各項目の垂直方向の中心位置と比較し、その項目の前後どちらにドロップするかを判断します。
function getAfterElement(container, y) {
const items = [...container.querySelectorAll(".item:not(.is-dragging)")];
return items.find((el) => {
const box = el.getBoundingClientRect();
return y < box.top + box.height / 2;
});
}アクセシブルなフィードバック
視覚的な手掛かりだけでは、キーボードやスクリーンリーダーを使用するユーザーが取り残されます。アクセシビリティのため、ドラッグ＆ドロップに ARIA ライブ通知とキーボード操作の代替手段を組み合わせてください。
クイックチェック
視覚的なフィードバックをテストします。
まとめ: 視覚的なフィードバック
ドラッグ中の項目をスタイル設定し、dragenter と dragleave でゾーンを強調表示し、深さカウンターでちらつきを解消し、ドラッグ画像をカスタマイズし、dropEffect でカーソルを制御し、ドロッププレースホルダーを表示しました。次はファイルのドラッグ＆ドロップです。
AI チューターと学ぶ JavaScript — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 59
- レッスン
- 200
よくある質問
「ドラッグ中の視覚的フィードバック」レッスンは無料ですか？
はい。「ドラッグ中の視覚的フィードバック」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。
「ドラッグ中の視覚的フィードバック」で何を学びますか？
ドラッグ操作中の要素のスタイルを設定します。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
JavaScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「ドラッグ中の視覚的フィードバック」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJavaScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 要素をドラッグ可能にする
- ドロップ先と dataTransfer
- ドラッグ中の視覚的フィードバック
- ページへファイルをドラッグする