要素をドラッグ可能にする
ドラッグを有効にし、ドラッグイベントを処理します。
「要素をドラッグ可能にする」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。
HTML Drag and Drop API
ネイティブのDrag and Drop APIを使うと、ユーザーは要素をつかんで別の場所にドロップできます。イベント駆動型のAPIで、ソース要素がドラッグイベントを発生させ、ドロップ先が独自のイベントを発生させます。ライブラリは必要ありません。
draggable属性
デフォルトでドラッグできるのはリンクと画像だけです。draggable="true"を追加すると、任意の要素をドラッグ可能にできます。
<div draggable="true" id="card">Drag me</div>JSでdraggableを設定する
draggableプロパティを使って、スクリプトから動作を切り替えることもできます。
const card = document.getElementById("card");
card.draggable = true;dragstartイベント
ドラッグが始まった瞬間にdragstartが発生します。ここでドラッグ対象を記録します。
card.addEventListener("dragstart", (e) => {
console.log("Started dragging", card.id);
});dataTransferでデータを持ち運ぶ
イベントからdataTransferにアクセスできます。dragstartでsetData(format, value)を使うと、ドラッグに伴って移動するペイロードを追加できます。
card.addEventListener("dragstart", (e) => {
e.dataTransfer.setData("text/plain", card.id);
});dragイベント
要素が移動している間、dragが継続的に発生します。1秒に何度も発生する可能性があるため、使用は控えめにしてください。
card.addEventListener("drag", (e) => {
// fires repeatedly during the drag
});dragendイベント
ドロップが成功したかどうかにかかわらず、ユーザーがマウスボタンなどを離すとdragendが発生します。これを使ってソースのスタイルをリセットします。
card.addEventListener("dragend", (e) => {
card.classList.remove("dragging");
});ソース要素を示す
よく使われるパターンは、dragstartでクラスを追加し、dragendで削除して、ドラッグ中の項目を暗くしたり強調表示したりする方法です。
card.addEventListener("dragstart", () => card.classList.add("dragging"));
card.addEventListener("dragend", () => card.classList.remove("dragging"));許可される効果
dragstartでeffectAllowedを設定し、"copy"、"move"、"link"、またはそれらの組み合わせなど、許可する操作を宣言します。
card.addEventListener("dragstart", (e) => {
e.dataTransfer.effectAllowed = "move";
});タッチデバイスに関する注意
ネイティブAPIのモバイルでのタッチ対応は限定的です。タッチを優先するアプリでは、Pointer Eventsまたは専用ライブラリを検討してください。ネイティブAPIはデスクトップで特に力を発揮します。
テキスト選択を無効にする
ドラッグ中に誤ってテキストを選択してしまうことがあります。小さなCSSルールで、ドラッグ時の選択を防げます。
/* CSS */
.draggable { user-select: none; }クイックチェック
draggableの基本を確認しましょう。
まとめ：要素をドラッグ可能にする
draggable="true"でドラッグを有効にし、dragstart・drag・dragendを処理し、dataTransfer.setDataでペイロードを追加し、effectAllowedを設定し、ソースのスタイルを整えました。次はドロップ先です。
よくある質問
「要素をドラッグ可能にする」レッスンは無料ですか？
はい。「要素をドラッグ可能にする」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。
「要素をドラッグ可能にする」で何を学びますか？
ドラッグを有効にし、ドラッグイベントを処理します。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
JavaScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「要素をドラッグ可能にする」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJavaScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。