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 の定義	勧告	初期定義

ブラウザの互換性

BCD tables only load in the browser

シンタックス

戻り値

例

仕様

ブラウザの互換性

あわせて参照