JavaScript多元素拖拽实现求教：如何获取拖拽对象ID

问题背景 #

现有单元素拖拽代码，无法扩展为多元素拖拽，核心难点是在drop_handler中获取被拖拽对象的ID。

原代码 #

let offsetX;
let offsetY;

onDragStart = function(ev) {
  const rect = ev.target.getBoundingClientRect();

  offsetX = ev.clientX - rect.x;
  offsetY = ev.clientY - rect.y;
};

drop_handler = function(ev) {
  ev.preventDefault();

  const left = parseInt(id2.style.left);
  const top = parseInt(id2.style.top);

  id1.style.position = 'absolute';
  id1.style.left = ev.clientX - left - offsetX + 'px';
  id1.style.top = ev.clientY - top - offsetY + 'px';
  id2.appendChild(document.getElementById("id1"));
};

dragover_handler = function(ev) {
  ev.preventDefault();
  ev.dataTransfer.dropEffect = "move";
};

<div id="id1" draggable="true" ondragstart="onDragStart(event)" style="border:2px solid green; cursor:pointer;width:100px;height:50px;">Dragged Div</div>

<div id="id2" style="position:absolute;left:200px;top:50px;border:2px solid red; cursor:pointer;width:200px;height:200px;" ondrop="drop_handler(event)" ondragover="dragover_handler(event)">Drop Div
</div>

修改方案 #

要支持多元素拖拽，核心是在拖拽开始时把被拖拽元素的ID存入dataTransfer对象，放置时再取出该ID操作对应元素：

1. 更新onDragStart函数

在拖拽启动时，将被拖拽元素的ID存入dataTransfer：

let offsetX;
let offsetY;

onDragStart = function(ev) {
  const rect = ev.target.getBoundingClientRect();
  offsetX = ev.clientX - rect.x;
  offsetY = ev.clientY - rect.y;
  // 存储被拖拽元素的ID
  ev.dataTransfer.setData("text/plain", ev.target.id);
};

2. 重构drop_handler函数

在放置事件中，取出存储的ID，动态定位被拖拽元素：

drop_handler = function(ev) {
  ev.preventDefault();
  // 获取被拖拽元素的ID
  const draggedId = ev.dataTransfer.getData("text/plain");
  const draggedElement = document.getElementById(draggedId);
  if (!draggedElement) return;

  const dropZone = ev.target;
  const left = parseInt(dropZone.style.left);
  const top = parseInt(dropZone.style.top);

  draggedElement.style.position = 'absolute';
  draggedElement.style.left = ev.clientX - left - offsetX + 'px';
  draggedElement.style.top = ev.clientY - top - offsetY + 'px';
  dropZone.appendChild(draggedElement);
};

3. 扩展HTML支持多拖拽元素

添加多个带唯一ID的可拖拽元素即可：

<div id="id1" draggable="true" ondragstart="onDragStart(event)" style="border:2px solid green; cursor:pointer;width:100px;height:50px;">Dragged Div 1</div>
<div id="id3" draggable="true" ondragstart="onDragStart(event)" style="border:2px solid blue; cursor:pointer;width:100px;height:50px; margin-top:10px;">Dragged Div 2</div>
<div id="id4" draggable="true" ondragstart="onDragStart(event)" style="border:2px solid orange; cursor:pointer;width:100px;height:50px; margin-top:10px;">Dragged Div 3</div>

<div id="id2" style="position:absolute;left:200px;top:50px;border:2px solid red; cursor:pointer;width:200px;height:200px;" ondrop="drop_handler(event)" ondragover="dragover_handler(event)">Drop Div
</div>

关键说明 #

• dataTransfer是拖拽事件的内置数据传递对象，用setData存储、getData读取，这里选择text/plain格式存储ID最简便。
• 修改后的代码不再依赖硬编码的元素ID，而是动态获取被拖拽元素，自然适配多元素拖拽场景。

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