如何在纯Javascript中更改拖动的文本而不更改正在抓取的原始文本？

Question

我似乎无法弄清楚如何更改拖动的文本，而不更改元素的原始文本。我只想更改拖动的文本。

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

}

<div id="div1">
  <span id="drag" draggable="true" ondragstart="drag(event)">drag me</span>
</div>
<div id="div2"></div>

Answer 1

要更改拖动的文本而不更改元素的原始文本，您可以修改dragstart事件监听器中的dataTransfer对象。在提供的代码中，dataTransfer 对象已用于设置拖动元素的数据类型和值，因此您可以向其添加另一个属性来存储拖动时要显示的文本。然后，在拖动事件侦听器中，您可以将 dataTransfer 的 data 属性设置为新的文本值。答案如下：

HTML 
<div id="div1">
  <span id="drag" draggable="true" ondragstart="dragStart(event)">drag me</span>
</div>
<div id="div2"></div>

---

JS 
function dragStart(event) {
  event.dataTransfer.setData("text", "bar");
  event.dataTransfer.setData("draggedText", "foo");
  event.target.style.color = "green";
}

function drag(event) {
  event.dataTransfer.setData("text", event.dataTransfer.getData("draggedText"));
}