1. 6.11 Drag and drop
      1. 6.11.1 Introduction
      2. 6.11.2 The drag data store
      3. 6.11.3 The DataTransfer interface
        1. 6.11.3.1 The DataTransferItemList interface
        2. 6.11.3.2 The DataTransferItem interface
      4. 6.11.4 The DragEvent interface
      5. 6.11.5 Events summary
      6. 6.11.6 The draggable attribute

6.11 Drag and drop

HTML_Drag_and_Drop_API

Support in all current engines.

Firefox3.5+Safari3.1+Chrome4+
Opera12+Edge79+
Edge (Legacy)18Internet Explorer5.5+
Firefox Android4+Safari iOS2+Chrome Android18+WebView Android4.4+Samsung Internet1.5+Opera Android14+

このセクションは、イベントベースのドラッグアンドドロップのメカニズムを定義する。

この仕様は、ドラッグアンドドロップ操作が実際に何であるかを正確に定義しない。

ポインティングデバイスをもつ視覚メディア上に、ドラッグ操作は一連のmousemoveイベントが続くmousedownイベントのデフォルトアクションであるかもしれず、ドロップは解放されているマウスによって引き起こされるかもしれない。

ポインティングデバイス以外の入力モダリティを使用する場合、ユーザーはおそらくドラッグアンドドロップ操作を実行するために明示的に意思表示する必要があり、それらがドラッグを望み、ドロップを望む場所を、それぞれ主張する。

6.11.1 Introduction

要素をドラッグ可能にするためには、要素にdraggable属性を与え、ドラッグされているデータを格納するdragstartドラッグに対してイベントリスナーを設定する。

イベントハンドラーは典型的に、それがドラッグされているテキスト選択でないことをチェックする必要があり、次にDataTransferオブジェクトにデータを格納し、許可される効果(コピー、移動、リンク、またはいくつかの組み合わせ)を設定する必要がある。

たとえば:

<p>What fruits do you like?</p>
<ol ondragstart="dragStartHandler(event)">
 <li draggable="true" data-value="fruit-apple">Apples</li>
 <li draggable="true" data-value="fruit-orange">Oranges</li>
 <li draggable="true" data-value="fruit-pear">Pears</li>
</ol>
<script>
  var internalDNDType = 'text/x-example'; // set this to something specific to your site
  function dragStartHandler(event) {
    if (event.target instanceof HTMLLIElement) {
      // use the element's data-value="" attribute as the value to be moving:
      event.dataTransfer.setData(internalDNDType, event.target.dataset.value);
      event.dataTransfer.effectAllowed = 'move'; // only allow moves
    } else {
      event.preventDefault(); // don't allow selection to be dragged
    }
  }
</script>

ドロップを受け入れるために、次のイベントをリッスンする必要がある:

  1. dragenterイベントハンドラーは、イベントをキャンセルすることによって、ドロップターゲットが潜在的にドロップを受け入れる可能性があるかどうかを報告する。
  2. dragoverイベントハンドラーは、イベントに関連付けられたDataTransferdropEffect属性を設定することによって、ユーザーに表示されるフィードバックを指定する。このイベントはまたキャンセルする必要がある。
  3. dropイベントハンドラーは、ドロップを受け入れるまたは拒否する最終選択を持つ。ドロップが受け入れられる場合、イベントハンドラーはターゲットに対してドロップ操作を実行しなければならない。このイベントはキャンセルする必要があるため、dropEffect属性の値をソースによって使用できるようにする。そうでなければ、ドロップ操作は拒否される。

たとえば:

<p>Drop your favorite fruits below:</p>
<ol ondragenter="dragEnterHandler(event)" ondragover="dragOverHandler(event)"
    ondrop="dropHandler(event)">
</ol>
<script>
  var internalDNDType = 'text/x-example'; // set this to something specific to your site
  function dragEnterHandler(event) {
    var items = event.dataTransfer.items;
    for (var i = 0; i < items.length; ++i) {
      var item = items[i];
      if (item.kind == 'string' && item.type == internalDNDType) {
        event.preventDefault();
        return;
      }
    }
  }
  function dragOverHandler(event) {
    event.dataTransfer.dropEffect = 'move';
    event.preventDefault();
  }
  function dropHandler(event) {
    var li = document.createElement('li');
    var data = event.dataTransfer.getData(internalDNDType);
    if (data == 'fruit-apple') {
      li.textContent = 'Apples';
    } else if (data == 'fruit-orange') {
      li.textContent = 'Oranges';
    } else if (data == 'fruit-pear') {
      li.textContent = 'Pears';
    } else {
      li.textContent = 'Unknown Fruit';
    }
    event.target.appendChild(li);
  }
</script>

ディスプレイからオリジナルの要素(ドラッグされたもの)を削除するために、dragendイベントを使用できる。

ここで私たちの例のために、それはそのイベントを処理するために元のマークアップを更新することを意味する:

<p>What fruits do you like?</p>
<ol ondragstart="dragStartHandler(event)" ondragend="dragEndHandler(event)">
 ...as before...
</ol>
<script>
  function dragStartHandler(event) {
    // ...as before...
  }
  function dragEndHandler(event) {
    if (event.dataTransfer.dropEffect == 'move') {
      // remove the dragged element
      event.target.parentNode.removeChild(event.target);
    }
  }
</script>

6.11.2 The drag data store

ドラッグデータストアとして知られる、ドラッグアンドドロップ操作を支えるデータは次の情報で構成される:

ドラッグデータストア作成された場合、それはそのドラッグデータストアアイテムリストが空であるように初期化されなければならず、それはドラッグデータストアのデフォルトフィードバックを持たず、ドラッグデータストアのビットマップおよびドラッグデータストアのホットスポット座標を持たず、そのドラッグデータストアモード保護モードであり、そのドラッグデータストアの許可された効果の状態は文字列"uninitialized"である。

6.11.3 The DataTransfer interface

DataTransfer

Support in all current engines.

Firefox3.5+Safari4+Chrome3+
Opera12+Edge79+
Edge (Legacy)12+Internet Explorer8+
Firefox Android?Safari iOS?Chrome Android?WebView Android37+Samsung Internet?Opera Android12+

DataTransferオブジェクトは、ドラッグアンドドロップ操作を支えるドラッグデータストアを公開するために使用される。

dataTransfer = new DataTransfer()

空のドラッグデータストアをもつ新しいDataTransferオブジェクトを作成する。

dataTransfer.dropEffect [ = value ]

現在選択されている操作の種類を返す。操作の種類がeffectAllowed属性によって許可されるものの1つでない場合、操作は失敗する。

選択した操作を変更す設定が可能である。

可能な値は、"none"、"copy"、"link"、および"move"である。

dataTransfer.effectAllowed [ = value ]

許可される操作の種類を返す。

許可される操作を変更するために、(dragstartイベント中に)設定可能である。

可能な値は、"none"、"copy"、"copyLink"、"copyMove"、"link"、"linkMove"、"move"、"all"、および"uninitialized"である。

dataTransfer.items

ドラッグデータとともに、DataTransferItemListオブジェクトを返す。

dataTransfer.setDragImage(element, x, y)

以前に指定されたフィードバックを置換し、ドラッグフィードバックを更新するために指定された要素を使用する。

dataTransfer.types

dragstartイベントで設定されたフォーマットを列挙する凍結された配列を返す。さらに、任意のファイルがドラッグされている場合、型の1つは文字列"Files"となる。

data = dataTransfer.getData(format)

指定されたデータを返す。そのようなデータが存在しない場合、空の文字列を返す。

dataTransfer.setData(format, data)

指定されたデータを追加する。

dataTransfer.clearData([ format ])

指定したフォーマットのデータを削除する。引数が省略された場合、すべてのデータを削除する。

dataTransfer.files

もしあれば、ドラッグされているファイルのFileListを返す。

ドラッグアンドドロップイベントの一部として作成されるDataTransferオブジェクトは、そのイベントが発生している間のみ有効である。

6.11.3.1 The DataTransferItemList interface

DataTransferItemList

Support in all current engines.

Firefox50+Safari6+Chrome13+
Opera12+Edge79+
Edge (Legacy)12+Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android14+

DataTransferオブジェクトはDataTransferItemListオブジェクトに関連付けられる。

items.length

ドラッグデータストア内のアイテムの数を返す。

items[index]

ドラッグデータストア内のindex番目のエントリーを表すDataTransferItemオブジェクトを返す。

items.remove(index)

ドラッグデータストア内のindex番目のエントリーを削除する。

items.clear()

ドラッグデータストア内のすべてのエントリーを削除する。

items.add(data)
items.add(data, type)

ドラッグデータストアに指定されたデータに対する新しいエントリーを追加する。データがプレーンテキストである場合、type文字列も提供される必要がある。

6.11.3.2 The DataTransferItem interface

DataTransferItem

Support in all current engines.

Firefox50+Safari5.1+Chrome11+
Opera12+Edge79+
Edge (Legacy)12+Internet ExplorerNo
Firefox Android?Safari iOS?Chrome Android?WebView Android4+Samsung Internet?Opera Android14+

DataTransferItemオブジェクトはDataTransferオブジェクトに関連付けられる。

item.kind

ドラッグデータ項目の種類、"string"、"file"のいずれかを返す。

item.type

ドラッグデータ項目型文字列を返す。

item.getAsString(callback)

ドラッグデータ項目の種類text.である場合、引数として文字列データをもつコールバックを呼び出す。

file = item.getAsFile()

ドラッグデータアイテムの種類Fileである場合、Fileオブジェクトを返す。

6.11.4 The DragEvent interface

DragEvent/DragEvent

Support in all current engines.

Firefox3.5+Safari14+Chrome46+
Opera12+Edge79+
Edge (Legacy)12+Internet ExplorerNo
Firefox Android?Safari iOSNoChrome AndroidNoWebView Android?Samsung Internet?Opera Android?

DragEvent

Support in all current engines.

Firefox3.5+Safari14+Chrome46+
Opera12+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOSNoChrome AndroidNoWebView Android?Samsung Internet?Opera Android?

ドラッグアンドドロップ処理モデルは、複数のイベントを含む。これらはすべてDragEventインターフェイスを使用する。

event.dataTransfer

イベントのDataTransferオブジェクトを返す。

他のイベントインターフェイスとの整合性を保つため、DragEventインターフェイスはコンストラクターを持つけれども、特に有用ではない。DataTransferオブジェクトは、ドラッグアンドドロップの間にブラウザーによって調整される処理およびセキュリティモデルを持つので、特に、スクリプトから有用なDataTransferオブジェクトを作成する方法はない。

6.11.5 Events summary

次のイベントは、ドラッグアンドドロップモデルに関与する。

イベント名ターゲット取消可能か?ドラッグデータストアモードdropEffectデフォルトの動作
dragstart

HTMLElement/dragstart_event

Support in all current engines.

Firefox9+Safari3.1+Chrome1+
Opera12+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12+
ソースノード✓取消可能読み書きモード"none"ドラッグアンドドロップ操作を開始する
drag

HTMLElement/drag_event

Support in all current engines.

Firefox9+Safari3.1+Chrome1+
Opera12+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12+
ソースノード✓取消可能保護モード"none"ドラッグアンドドロップ操作を続行する
dragenter

HTMLElement/dragenter_event

Support in all current engines.

Firefox9+Safari3.1+Chrome1+
Opera12+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12+
即時ユーザー選択またはbody要素✓取消可能保護モードeffectAllowed値をベースにする潜在的なターゲット要素として即時ユーザー選択を拒絶する
dragleave

HTMLElement/dragleave_event

Support in all current engines.

Firefox9+Safari3.1+Chrome1+
Opera12+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12+
前のターゲット要素保護モード"none"なし
dragover

HTMLElement/dragover_event

Support in all current engines.

Firefox9+Safari3.1+Chrome1+
Opera12+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12+
現在のターゲット要素✓取消可能保護モードeffectAllowed値をベースにする"none"に現在のドラッグ操作リセットする
drop

HTMLElement/drop_event

Support in all current engines.

Firefox9+Safari3.1+Chrome1+
Opera12+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12+
現在のターゲット要素✓取消可能読み取り専用モード現在のドラッグ操作変化する
dragend

HTMLElement/dragend_event

Support in all current engines.

Firefox9+Safari3.1+Chrome1+
Opera12+Edge79+
Edge (Legacy)12+Internet Explorer9+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12+
ソースノード保護モード現在のドラッグ操作変化する

これらのイベントバブルのすべては、構成され、effectAllowed属性は常に、dragstartイベント後に持っていた値を持ち、dragstartイベントで"uninitialized"をデフォルトとする。

6.11.6 The draggable attribute

Global_attributes/draggable

Support in all current engines.

Firefox2+Safari5+Chrome4+
Opera12+Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?

すべてのHTML要素draggableコンテンツ属性設定を持ってもよい。draggable属性は、次のキーワードと状態を持つ列挙属性である:

キーワード状態概要
truetrueThe element will be draggable.
falsefalseThe element will not be draggable.

この属性の欠損値のデフォルト不正値のデフォルトは両方ともauto状態である。The auto state uses the default behavior of the user agent.

draggable属性を持つ要素はまた、非視覚的な相互作用の目的のために要素を名付けるtitle属性を持つべきである。

element.draggable [ = value ]

要素がドラッグ可能である場合にtrueを返す。そうでなければfalseを返す。

デフォルトを上書きしdraggableコンテンツの属性を設定するための、設定が可能である。