DOM

：

：

DataTransfer.setData() メソッド

　編集：2022.10.20 by T.A.

[Edge]。→、、

DataTransfer のドラッグ データに指定のデータと型を設定します。

与えられた型のデータが存在しない場合、このデータはドラッグ データ ストアの末尾に加えられ、このような types リストの最後の項目は新しい型になります。与えられた型のデータが存在する場合、既存のデータが同じ位置で置き換えられます。同じ型のデータが置き換えられる時、types リストの並び順は変更されません。

構文
DataTransfer.setData(format, data)
DataTransfer DataTransfer。
format 文字列。ドラッグ オブジェクトに追加／変更するドラッグ データの型を表します。
データ型説明と値
text/plain 只のテキスト
text/uri-list ¶URL
text/html ¶HTMLデータ

他は不明。

data 文字列。ドラッグ オブジェクトに追加／変更するデータを表します。
戻り値

なし（undefined）。

例
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()、setData()

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;
  IdLog.innerHTML=IdLog.innerHTML+eve.dataTransfer.getData('text/html');  //ドラッグ データ表示。
  eve.dataTransfer.setData('text/html', "[I要素]");  //ドラッグ データ セット。
  IdLog.innerHTML=IdLog.innerHTML+"："+eve.dataTransfer.types+"　";  //結果の全てのデータ型表示。
}
document.ondragstart=Job;  //イベント割り当て。
テスト