DataTransfer.types

DataTransfer.types 読み取り専用 プロパティは、dragstart イベントで設定された (stringsとしての) ドラッグデータフォーマットの配列を返します。フォーマットの順序は、ドラッグ操作に含まれるデータの順序と同じです。

フォーマットは、データのタイプまたはフォーマットを与える Unicode 文字列で、一般的には MIME タイプで与えられます。MIME タイプではない値の中には、レガシーな理由で特殊なものもあります (例えば "text" など)。

シンタックス

dataTransfer.types;

戻り値

ドラッグ操作で使用されるデータ形式の配列。各フォーマットは string です。ドラッグ操作にデータが含まれていない場合、このリストは空になります。ドラッグ操作にファイルが含まれている場合は、その型の 1 つが文字列 Files になります。

例

この例では、types と items プロパティを使用しています。

<!DOCTYPE html>
<html lang=ja>
<title>DataTransfer.{types,item}プロパティの例</title>
<meta content="width=device-width">
<style>
  div {
    margin: 0em;
    padding: 2em;
  }
  #target {
    border: 1px solid black;
  }
</style>
<script>
function dragstart_handler(ev) {
 console.log("dragStart: target.id = " + ev.target.id);
 // この要素の id をドラッグ ペイロードに追加し、
 // drop ハンドラがどの要素をツリーに追加するかを知ることができるようにします。
 ev.dataTransfer.setData("text/plain", ev.target.id);
 ev.dataTransfer.effectAllowed = "move";
}

function drop_handler(ev) {
 console.log("drop: target.id = " + ev.target.id);
 ev.preventDefault();
 // ターゲットの ID を取得し、移動した要素をターゲットの DOM に追加します。
 var data = ev.dataTransfer.getData("text");
 ev.target.appendChild(document.getElementById(data));
 // 各フォーマットタイプをプリントする
 if (ev.dataTransfer.types != null) {
   for (var i=0; i < ev.dataTransfer.types.length; i++) {
     console.log("... types[" + i + "] = " + ev.dataTransfer.types[i]);
   }
 }
 // 各項目の "kind" と "type" をプリントする
 if (ev.dataTransfer.items != null) {
   for (var i=0; i < ev.dataTransfer.items.length; i++) {
     console.log("... items[" + i + "].kind = " + ev.dataTransfer.items[i].kind + " ; type = " + ev.dataTransfer.items[i].type);
   }
 }
}

function dragover_handler(ev) {
 console.log("dragOver");
 ev.preventDefault();
 // dropEffect を移動するように設定します。
 ev.dataTransfer.dropEffect = "move"
}
</script>
<body>
<h1><code>DataTransfer</code>.{<code>types</code>, <code>items</code>} プロパティの例</h1>
 <ul>
   <li id="i1" ondragstart="dragstart_handler(event);" draggable="true">アイテム1をドロップゾーンにドラッグ</li>
   <li id="i2" ondragstart="dragstart_handler(event);" draggable="true">アイテム2をドロップゾーンにドラッグ</li>
 </ul>
 <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">ドロップゾーン</div>
</body>
</html>

仕様

仕様書 ステータス コメント
HTML Living Standard
types の定義		 現行の標準
HTML 5.1
types の定義		 勧告 初期定義

ブラウザの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
typesChrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 ありIE 完全対応 10
補足
完全対応 10
補足
補足 The property returns a DOMStringList.
補足 Text is returned instead of text/plain
Opera 完全対応 あり
補足
完全対応 あり
補足
補足 As of Opera 12, Text is returned instead of text/plain
Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 ありOpera Android 完全対応 ありSafari iOS 未対応 なしSamsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応
実装ノートを参照してください。
実装ノートを参照してください。

あわせて参照