DataTransfer: setData() メソッド

setData(format, data)

<div>
  <p id="source" draggable="true">
    この要素を選択し、ドロップゾーンまでドラッグしてから選択を解除すると、要素が移動します。
  </p>
</div>
<div id="target">ドロップゾーン</div>

<button id="reset">例をリセット</button>

div {
  margin: 0.5em 0;
  padding: 2em;
}

#target,
#source {
  border: 1px solid black;
  padding: 0.5rem;
}

.dragging {
  background-color: pink;
}

const source = document.querySelector("#source");
source.addEventListener("dragstart", (ev) => {
  console.log("dragStart");
  // ソース要素の背景色を変更して、ドラッグが開始されたことを示す
  ev.currentTarget.classList.add("dragging");
  // ドラッグデータキャッシュ（すべての形式/型）をクリア
  ev.dataTransfer.clearData();
  // ドラッグの形式とデータを設定。
  // データにイベントターゲットの ID を使用
  ev.dataTransfer.setData("text/plain", ev.target.id);
});
source.addEventListener("dragend", (ev) =>
  ev.target.classList.remove("dragging"),
);

const target = document.querySelector("#target");
target.addEventListener("dragover", (ev) => {
  console.log("dragOver");
  ev.preventDefault();
});
target.addEventListener("drop", (ev) => {
  console.log("Drop");
  ev.preventDefault();
  // データ（ソース要素の ID）を取得
  const data = ev.dataTransfer.getData("text");
  const source = document.getElementById(data);
  ev.target.appendChild(source);
});

const reset = document.querySelector("#reset");
reset.addEventListener("click", () => document.location.reload());