DOM

：

：

DataTransfer.getData() メソッド

　編集：2022.10.20 by T.A.

[Edge]。→、、

DataTransfer のドラッグ データを指定した型の文字列で取得します。

ドラッグ操作がデータを含んでいない場合、このメソッドは空文字列を返します。

構文
DataTransfer.getData(format)
DataTransfer DataTransfer。
format 文字列。受け取るデータの型を表します。
text/plain ¶只のテキスト
text/uri-list ¶URL
text/html ¶HTMLテキスト

他は不明。

戻り値

文字列。format で指定した型のドラッグ データです。

ドラッグ操作にデータがなかったり、format で指定した型のデータがなかったりした場合、このメソッドは空文字列を返します。

注意
データの利用可能性

では、「ドラッグ データ ストア モード」が規定されています。これは、DataTransfer.getData() が期待した値を返さないという、予期しない動作をする可能性があります。すべてのブラウザーがこの制限を強制しているわけではないからです。dragstart と drop イベントの処理中は、安全にデータにアクセスすることができます。それ以外のイベントでは、データは利用できないものと考えてください。それでも、項目とその形式を列挙することは可能です。

例
mdnより

この例は、DataTransfer オブジェクトの getData() メソッドおよび setData() メソッドの使い方を紹介します。

HTML： 

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
    <span id="drag" draggable="true" ondragstart="drag(event)">drag me to the other box</span>
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

CSS： 

#div1, #div2 {
    width:100px;
    height:50px;
    padding:10px;
    border:1px solid #aaaaaa;
}

JavaScript： 

function allowDrop(allowdropevent) {
    allowdropevent.target.style.color = 'blue';
    allowdropevent.preventDefault();
}

function drag(dragevent) {
    dragevent.dataTransfer.setData("text", dragevent.target.id);
    dragevent.target.style.color = 'green';
}

function drop(dropevent) {
    dropevent.preventDefault();
    const data = dropevent.dataTransfer.getData("text");
    dropevent.target.appendChild(document.getElementById(data));
    document.getElementById("drag").style.color = 'black';
}
dragstart イベントと getData()

HTML： 

<SPAN>[SPAN要素。<B>[B要素]</B>テキスト]</SPAN><BR>
<DIV id=IdTest contenteditable>ここにドラッグ＆ドロップ操作をしてみて<B>[B要素]</B>テキスト…</DIV>
<SPAN id=IdLog></SPAN>

JavaScript： 

function Job(eve){  //dragstart イベントの処理：
  D=eve;
  DA=eve.dataTransfer;
  if(eve.ctrlKey){  //イベント発生時に [Ctrl]キーが押されていたら：
    GD=eve.dataTransfer.getData("text/plain");  //只のテキストとしてドラッグ データを得る。
  }else{            //　押されていないなら：
    GD=eve.dataTransfer.getData("text/html");  //HTMLとしてドラッグ データを得る。
  }
  IdLog.innerHTML=IdLog.innerHTML+GD+"　";  //得たデータの表示。
}
document.ondragstart=Job;  //イベント割り当て。
テスト