このページは Cloud Translation API によって翻訳されました。

HTML5 Drag and Drop API

この投稿では、ドラッグ&ドロップの基本について説明します。

Eric Bidelman

Rachel Andrew

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

ほとんどのブラウザでは、デフォルトでテキスト、画像、リンクをドラッグできます。たとえば、ウェブページ上でリンクをドラッグすると、タイトルと URL が入った小さなボックスが表示されます。このボックスをアドレスバーやデスクトップにドロップして、ショートカットを作成したり、リンク先に移動したりできます。他の種類のコンテンツをドラッグ可能にするには、HTML5 Drag and Drop API を使用する必要があります。

オブジェクトをドラッグ可能にするには、その要素に draggable=true を設定します。画像、ファイル、リンク、ファイル、ページ上のマークアップなど、ほぼすべてのものをドラッグできます。

次の例では、CSS グリッドで配置された列を並べ替えるインターフェースを作成します。列の基本的なマークアップは次のようになります。各列の draggable 属性は true に設定されています。

<div class="container">
  <div draggable="true" class="box">A</div>
  <div draggable="true" class="box">B</div>
  <div draggable="true" class="box">C</div>
</div>

コンテナ要素とボックス要素の CSS は次のとおりです。ドラッグ機能に関連する CSS は cursor: move プロパティのみです。コードの残りの部分では、コンテナ要素とボックス要素のレイアウトとスタイルを制御します。

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.box {
  border: 3px solid #666;
  background-color: #ddd;
  border-radius: .5em;
  padding: 10px;
  cursor: move;
}

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

ドラッグイベントをリッスンする

ドラッグプロセスをモニタリングするには、次のいずれかのイベントをリッスンします。

ドラッグフローを処理するには、なんらかのソース要素（ドラッグを開始する場所）、データペイロード（ドラッグする要素）、ターゲット（ドロップをキャッチする領域）が必要です。ソース要素には、ほぼすべての種類の要素を使用できます。ターゲットは、ユーザーがドロップしようとしているデータを受け入れるドロップゾーンまたはドロップゾーンのセットです。すべての要素がターゲットになるとは限りません。たとえば、ターゲットを画像にすることはできません。

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

コンテンツに draggable="true" 属性を定義したら、dragstart イベントハンドラをアタッチして、各列のドラッグシーケンスを開始します。

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

function handleDragStart(e) {
  this.style.opacity = '0.4';
}

function handleDragEnd(e) {
  this.style.opacity = '1';
}

let items = document.querySelectorAll('.container .box');
items.forEach(function (item) {
  item.addEventListener('dragstart', handleDragStart);
  item.addEventListener('dragend', handleDragEnd);
});

結果は、以下の Glitch のデモで確認できます。アイテムをドラッグすると、その不透明度が変わります。ソース要素には dragstart イベントがあるため、this.style.opacity を 40% に設定すると、その要素が現在移動中の選択項目であるという視覚的なフィードバックをユーザーに提供します。アイテムをドロップすると、ドロップ動作をまだ定義していなくても、ソース要素が 100% の不透明度に戻ります。

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

インターフェースの操作方法をユーザーが理解できるようにするには、dragenter、dragover、dragleave の各イベントハンドラを使用します。この例では、列はドラッグ可能であるだけでなく、ドロップターゲットでもあります。ユーザーが列上でドラッグしたアイテムを持っているときに枠線を破線で表示すると、この点がわかりやすくなります。たとえば、CSS で、ドロップターゲットの要素用に over クラスを作成できます。

.box.over {
  border: 3px dotted #666;
}

次に、JavaScript でイベントハンドラを設定し、列がドラッグされたときに over クラスを追加し、ドラッグされた要素が離れたときにクラスを削除します。また、dragend ハンドラでは、ドラッグの最後にクラスを削除します。

document.addEventListener('DOMContentLoaded', (event) => {

  function handleDragStart(e) {
    this.style.opacity = '0.4';
  }

  function handleDragEnd(e) {
    this.style.opacity = '1';

    items.forEach(function (item) {
      item.classList.remove('over');
    });
  }

  function handleDragOver(e) {
    e.preventDefault();
    return false;
  }

  function handleDragEnter(e) {
    this.classList.add('over');
  }

  function handleDragLeave(e) {
    this.classList.remove('over');
  }

  let items = document.querySelectorAll('.container .box');
  items.forEach(function(item) {
    item.addEventListener('dragstart', handleDragStart);
    item.addEventListener('dragover', handleDragOver);
    item.addEventListener('dragenter', handleDragEnter);
    item.addEventListener('dragleave', handleDragLeave);
    item.addEventListener('dragend', handleDragEnd);
    item.addEventListener('drop', handleDrop);
  });
});

このコードでは、注目すべき点がいくつかあります。

dragover イベントのデフォルトのアクションでは、dataTransfer.dropEffect プロパティが "none" に設定されます。dropEffect プロパティについては、このページの後半で説明します。これにより、drop イベントが発生しなくなります。この動作をオーバーライドするには、e.preventDefault() を呼び出します。もう 1 つのおすすめの方法は、同じハンドラで false を返すことです。
dragenter イベントハンドラは、dragover ではなく over クラスを切り替えるために使用されます。dragover を使用した場合、ドラッグされたアイテムをユーザーが列の上に置いている間にイベントが繰り返し発生し、CSS クラスが繰り返し切り替わります。これにより、ブラウザが不要なレンダリング処理を多く行い、ユーザーエクスペリエンスに影響する可能性があります。再描画を最小限に抑えることを強くおすすめします。dragover を使用する必要がある場合は、イベントリスナーのスロットリングまたはデバウンスを検討してください。

ドロップを完了する

ドロップを処理するには、drop イベントのイベントリスナーを追加します。drop ハンドラで、ドロップに対するブラウザのデフォルトの動作（通常はなんらかの不快なリダイレクト）を防ぐ必要があります。そのためには、e.stopPropagation() を呼び出します。

function handleDrop(e) {
  e.stopPropagation(); // stops the browser from redirecting.
  return false;
}

新しいハンドラを他のハンドラと一緒に登録します。

  let items = document.querySelectorAll('.container .box');
  items.forEach(function(item) {
    item.addEventListener('dragstart', handleDragStart);
    item.addEventListener('dragover', handleDragOver);
    item.addEventListener('dragenter', handleDragEnter);
    item.addEventListener('dragleave', handleDragLeave);
    item.addEventListener('dragend', handleDragEnd);
    item.addEventListener('drop', handleDrop);
  });

この時点でコードを実行しても、アイテムは新しい場所にドロップされません。これを行うには、DataTransfer オブジェクトを使用します。

dataTransfer プロパティは、ドラッグアクションで送信されたデータを保持します。dataTransfer は dragstart イベントで設定され、ドロップイベントで読み取られるか処理されます。e.dataTransfer.setData(mimeType, dataPayload) を呼び出すと、オブジェクトの MIME タイプとデータペイロードを設定できます。

この例では、ユーザーが列の順序を並べ替えられるようにします。そのためには、まず、ドラッグの開始時にソース要素の HTML を保存する必要があります。

function handleDragStart(e) {
  this.style.opacity = '0.4';

  dragSrcEl = this;

  e.dataTransfer.effectAllowed = 'move';
  e.dataTransfer.setData('text/html', this.innerHTML);
}

drop イベントで、ソース列の HTML を、データをドロップしたターゲット列の HTML に設定して、列の削除を処理します。これには、ユーザーがドラッグ元と同じ列にドロップしていないかどうかの確認も含まれます。

function handleDrop(e) {
  e.stopPropagation();

  if (dragSrcEl !== this) {
    dragSrcEl.innerHTML = this.innerHTML;
    this.innerHTML = e.dataTransfer.getData('text/html');
  }

  return false;
}

次のデモで結果を確認できます。そのためにはパソコンのブラウザが必要ですDrag and Drop API はモバイルではサポートされていません。A 列を B 列の上にドラッグして離すと、位置がどのように変化するかがわかります。

その他のドラッグプロパティ

dataTransfer オブジェクトは、ドラッグプロセス中にユーザーに視覚的なフィードバックを提供し、各ドロップターゲットが特定のデータ型にどのように応答するかを制御するプロパティを公開します。

dataTransfer.effectAllowed は、ユーザーが要素に対して実行できる「ドラッグの種類」を制限します。これは、ドラッグ&ドロップ処理モデルで、dragenter イベントと dragover イベント中に dropEffect を初期化するために使用します。このプロパティの値は none、copy、copyLink、copyMove、link、linkMove、move、all、uninitialized のいずれかです。
dataTransfer.dropEffect は、dragenter イベントと dragover イベント中にユーザーが受け取るフィードバックを制御します。ユーザーがターゲット要素の上にポインタを置くと、コピーや移動などの操作の種類がブラウザのカーソルで表示されます。この効果は、none、copy、link、move のいずれかの値を取ります。
e.dataTransfer.setDragImage(imgElement, x, y) は、ブラウザのデフォルトの「ゴースト画像」フィードバックを使用する代わりに、ドラッグアイコンを設定することを意味します。

ファイルのアップロード

この簡単な例では、ドラッグソースとドラッグターゲットの両方として列を使用しています。これは、ユーザーにアイテムを並べ替えるよう求める UI で発生します。状況によっては、ドラッグターゲットとソースの要素タイプが異なる場合があります。たとえば、インターフェースでは、選択した画像をターゲットにドラッグして、商品のメイン画像として 1 つの画像を選択する必要があります。

ドラッグ&ドロップは、ユーザーがアイテムをデスクトップからアプリケーションにドラッグできるようにするためによく使用されます。主な違いは drop ハンドラにあります。dataTransfer.getData() を使用してファイルにアクセスする代わりに、そのデータは dataTransfer.files プロパティに格納されます。

function handleDrop(e) {
  e.stopPropagation(); // Stops some browsers from redirecting.
  e.preventDefault();

  var files = e.dataTransfer.files;
  for (var i = 0, f; (f = files[i]); i++) {
    // Read the File objects in this FileList.
  }
}

詳しくは、カスタムドラッグ&ドロップをご覧ください。

HTML5 Drag and Drop API

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

ドラッグ イベントをリッスンする

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