如何在纯JavaScript中修改拖拽文本且不改变原元素文本？

问题说明 #

想要修改拖拽全程中光标旁显示的文本，但不想改动原拖拽元素的内容。当前代码会直接修改原元素的文本，不符合需求。

原代码 #

JavaScript

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

HTML

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

解决方案 #

核心逻辑是不修改原元素内容，直接通过dataTransfer.setData()定义拖拽时跟随光标显示的文本。拖拽光标旁的文本由dataTransfer中存储的text类型数据决定，该设置会在整个拖拽阶段生效，且不会影响原元素。

修改后的代码：

JavaScript

function drag(dragevent) {
  // 设置拖拽时光标旁显示的自定义文本
  dragevent.dataTransfer.setData("text", "自定义拖拽文本");
  // 可选：指定拖拽操作类型（仅规范交互逻辑，不影响文本显示）
  dragevent.dataTransfer.effectAllowed = "move";
  // 保留原元素样式修改（如果需要）
  dragevent.target.style.color = "green";
}

HTML（无需修改）

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

关键说明 #

• 删除了dragevent.target.innerHTML = 'bar'，避免直接修改原元素的内容
• 将dataTransfer.setData的text值替换为你需要的拖拽提示文本，该文本会全程跟随光标显示
• 若需要给原元素添加拖拽状态样式（比如字体变绿），可以保留相关样式代码，不会干扰拖拽文本的展示

内容的提问来源于stack exchange，提问作者broJR