1. 6.9 ドラッグアンドドロップ
      1. 6.9.1 導入
      2. 6.9.2 ドラッグデータストア
      3. 6.9.3 DataTransferインターフェイス
        1. 6.9.3.1 DataTransferItemListインターフェイス
        2. 6.9.3.2 DataTransferItemインターフェイス
      4. 6.9.4 DragEventインターフェイス
      5. 6.9.5 イベントの概要
      6. 6.9.6 draggable属性

6.9 ドラッグアンドドロップ

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+
caniuse.com table

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

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

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

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

6.9.1 導入

要素をドラッグ可能にするためには、要素に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.9.2 ドラッグデータストア

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

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

6.9.3 DataTransferインターフェイス

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

dataTransfer = new DataTransfer()

DataTransfer/DataTransfer

Support in one engine only.

Firefox?SafariNoChrome60+
Opera47+Edge79+
Edge (Legacy)NoInternet ExplorerNo
Firefox Android?Safari iOSNoChrome Android60+WebView Android60+Samsung Internet8.0+Opera Android44+

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

dataTransfer . dropEffect [ = value ]

DataTransfer/dropEffect

Support in all current engines.

FirefoxYesSafariYesChromeYes
OperaYesEdgeYes
Edge (Legacy)12+Internet Explorer?
Firefox AndroidYesSafari iOSNoChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera AndroidYes

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

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

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

dataTransfer . effectAllowed [ = value ]

DataTransfer/effectAllowed

Support in all current engines.

FirefoxYesSafariYesChromeYes
OperaYesEdgeYes
Edge (Legacy)12+Internet Explorer?
Firefox AndroidYesSafari iOSNoChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera AndroidYes

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

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

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

dataTransfer . items

DataTransfer/items

Firefox50+SafariNoChrome4+
Opera12+Edge79+
Edge (Legacy)12+Internet ExplorerNo
Firefox Android52+Safari iOSNoChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera AndroidYes

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

dataTransfer . setDragImage(element, x, y)

DataTransfer/setDragImage

Support in all current engines.

FirefoxYesSafariYesChromeYes
OperaYesEdgeYes
Edge (Legacy)18Internet Explorer?
Firefox AndroidYesSafari iOSNoChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera AndroidYes

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

dataTransfer . types

DataTransfer/types

Support in all current engines.

FirefoxYesSafariYesChromeYes
OperaYesEdgeYes
Edge (Legacy)12+Internet Explorer10+
Firefox AndroidYesSafari iOSNoChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera AndroidYes

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

data = dataTransfer . getData(format)

DataTransfer/getData

Support in all current engines.

FirefoxYesSafariYesChromeYes
OperaYesEdgeYes
Edge (Legacy)12+Internet Explorer?
Firefox AndroidYesSafari iOSNoChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera AndroidYes

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

dataTransfer . setData(format, data)

DataTransfer/setData

Support in all current engines.

Firefox10+Safari5+Chrome3+
Opera12+Edge79+
Edge (Legacy)12+Internet ExplorerNo
Firefox Android10+Safari iOS5+Chrome Android18+WebView Android37+Samsung Internet1.0+Opera Android12+

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

dataTransfer . clearData( [ format ] )

DataTransfer/clearData

Support in all current engines.

FirefoxYesSafariYesChromeYes
OperaYesEdgeYes
Edge (Legacy)12+Internet Explorer?
Firefox AndroidYesSafari iOSNoChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera AndroidYes

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

dataTransfer . files

DataTransfer/files

Support in all current engines.

FirefoxYesSafariYesChromeYes
OperaYesEdgeYes
Edge (Legacy)12+Internet Explorer?
Firefox AndroidYesSafari iOSNoChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera AndroidYes

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

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

6.9.3.1 DataTransferItemListインターフェイス

DataTransferItemList/DataTransferItem

Support in all current engines.

Firefox50+Safari6+Chrome13+
Opera12+Edge79+
Edge (Legacy)NoInternet ExplorerNo
Firefox Android50+Safari iOS6+Chrome Android18+WebView Android4.4+Samsung Internet1.0+Opera AndroidNo

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

items . length

DataTransferItemList/length

Support in all current engines.

Firefox50+Safari6+Chrome13+
Opera12+Edge79+
Edge (Legacy)12+Internet ExplorerNo
Firefox Android50+Safari iOS6+Chrome Android18+WebView Android4.4+Samsung Internet1.0+Opera AndroidNo

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

items[index]

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

items . remove(index)

DataTransferItemList/remove

Support in all current engines.

Firefox50+Safari6+Chrome31+
Opera12+Edge79+
Edge (Legacy)12+Internet ExplorerNo
Firefox Android50+Safari iOS6+Chrome Android31+WebView Android4.4.3+Samsung Internet2.0+Opera AndroidNo

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

items . clear()

DataTransferItemList/clear

Support in all current engines.

Firefox50+Safari6+Chrome13+
Opera12+Edge79+
Edge (Legacy)12+Internet ExplorerNo
Firefox Android50+Safari iOS6+Chrome Android18+WebView Android4.4+Samsung Internet1.0+Opera AndroidNo

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

items . add(data)

DataTransferItemList/add

Support in all current engines.

Firefox50+Safari6+Chrome13+
Opera12+Edge79+
Edge (Legacy)NoInternet ExplorerNo
Firefox Android50+Safari iOS6+Chrome Android18+WebView Android4.4+Samsung Internet1.0+Opera AndroidNo
items . add(data, type)

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

6.9.3.2 DataTransferItemインターフェイス

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

item . kind

DataTransferItem/kind

Support in all current engines.

Firefox50+Safari5.1+Chrome11+
Opera12+Edge79+
Edge (Legacy)12+Internet ExplorerNo
Firefox Android50+Safari iOS5+Chrome Android18+WebView Android4+Samsung Internet1.0+Opera AndroidNo

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

item . type

DataTransferItem/type

Support in all current engines.

Firefox50+Safari5.1+Chrome11+
Opera12+Edge79+
Edge (Legacy)12+Internet ExplorerNo
Firefox Android50+Safari iOS5+Chrome Android18+WebView Android4+Samsung Internet1.0+Opera AndroidNo

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

item . getAsString(callback)

DataTransferItem/getAsString

Support in all current engines.

Firefox50+Safari5.1+Chrome11+
Opera12+Edge79+
Edge (Legacy)12+Internet ExplorerNo
Firefox Android50+Safari iOS5+Chrome Android18+WebView Android4+Samsung Internet1.0+Opera AndroidNo

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

file = item . getAsFile()

DataTransferItem/getAsFile

Support in all current engines.

Firefox50+Safari5.1+Chrome11+
Opera12+Edge79+
Edge (Legacy)12+Internet ExplorerNo
Firefox Android50+Safari iOS5+Chrome Android18+WebView Android4+Samsung Internet1.0+Opera AndroidNo

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

6.9.4 DragEventインターフェイス

DragEvent/DragEvent

Support in all current engines.

Firefox3.5+Safari3.1+Chrome46+
Opera12+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox AndroidYesSafari iOSNoChrome AndroidNoWebView AndroidNoSamsung InternetNoOpera AndroidNo

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

event . dataTransfer

DragEvent/dataTransfer

Support in all current engines.

Firefox3.5+Safari3.1+Chrome46+
OperaYesEdge79+
Edge (Legacy)12+Internet Explorer10+
Firefox AndroidYesSafari iOSNoChrome AndroidNoWebView AndroidNoSamsung InternetNoOpera AndroidNo

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

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

6.9.5 イベントの概要

Document/drag_event

Firefox🔰 3.5+Safari3.1+Chrome4+
Opera12+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox AndroidNoSafari iOS11+Chrome AndroidNoWebView AndroidNoSamsung InternetNoOpera AndroidNo

Document/dragend_event

Firefox🔰 3.5+Safari3.1+Chrome4+
Opera12+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox AndroidNoSafari iOS11+Chrome AndroidNoWebView AndroidNoSamsung InternetNoOpera AndroidNo

Document/dragenter_event

Support in all current engines.

Firefox3.5+Safari3.1+Chrome4+
Opera12+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox AndroidNoSafari iOS11+Chrome AndroidNoWebView AndroidNoSamsung InternetNoOpera AndroidNo

Document/dragleave_event

Support in all current engines.

Firefox3.5+Safari3.1+Chrome4+
Opera12+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox AndroidNoSafari iOS11+Chrome AndroidNoWebView AndroidNoSamsung InternetNoOpera AndroidNo

Document/dragover_event

Support in all current engines.

Firefox3.5+Safari3.1+Chrome4+
Opera12+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox AndroidNoSafari iOS11+Chrome AndroidNoWebView AndroidNoSamsung InternetNoOpera AndroidNo

Document/dragstart_event

Support in all current engines.

Firefox3.5+Safari3.1+Chrome4+
Opera12+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox AndroidNoSafari iOS11+Chrome AndroidNoWebView AndroidNoSamsung InternetNoOpera AndroidNo

Document/drop_event

Support in all current engines.

Firefox3.5+Safari3.1+Chrome4+
Opera12+Edge79+
Edge (Legacy)12+Internet Explorer10+
Firefox AndroidNoSafari iOS11+Chrome AndroidNoWebView AndroidNoSamsung InternetNoOpera AndroidNo

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

イベント名ターゲット取消可能か?ドラッグデータストアモードdropEffectデフォルトの動作
dragstartソースノード✓取消可能読み書きモード"none"ドラッグアンドドロップ操作を開始する
dragソースノード✓取消可能保護モード"none"ドラッグアンドドロップ操作を続行する
dragenter即時ユーザー選択またはbody要素✓取消可能保護モードeffectAllowed値をベースにする潜在的なターゲット要素として即時ユーザー選択を拒絶する
dragleave前のターゲット要素保護モード"none"なし
dragover現在のターゲット要素✓取消可能保護モードeffectAllowed値をベースにする"none"に現在のドラッグ操作リセットする
drop現在のターゲット要素✓取消可能読み取り専用モード現在のドラッグ操作変化する
dragendソースノード保護モード現在のドラッグ操作変化する

上記の表に示されないもの:すべてのこれらイベントバブルは構成され、およびeffectAllowed属性は常に、それがdragstartイベント後に持っていた値を持ち、dragstartイベントで"uninitialized"をデフォルトとする。

6.9.6 draggable属性

Global_attributes/draggable

Support in all current engines.

Firefox2+SafariYesChromeYes
Opera12+EdgeYes
Edge (Legacy)12+Internet ExplorerYes
Firefox Android4+Safari iOSYesChrome AndroidYesWebView AndroidYesSamsung InternetYesOpera AndroidYes

すべてのHTML要素draggableコンテンツ属性設定を持ってもよい。draggable属性は、列挙属性である。それは3つの状態を持つ。1番目の状態はtrueであり、それはキーワードtrueを持つ。2番目の状態はfalseであり、それはキーワードfalseを持つ。3番目の状態はautoである。これは、キーワードを持たないが、欠損値のデフォルトかつ不正値のデフォルトである。

true状態は要素がドラッグ可能であることを意味し、false状態はそうでないことを意味する。auto状態はユーザーエージェントのデフォルト動作を使用する。

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

element . draggable [ = value ]

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

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