如何在JavaScript中获取拖拽元素的文本与类名

原生拖拽机制里，drop事件无法直接访问拖拽源的元素信息，你需要在dragstart阶段把所需数据存入dataTransfer对象，之后在drop阶段读取出来。

下面是修改后的完整代码：

JavaScript #

function onDrag(ev) {
  // 将拖拽元素的文本和类名打包成JSON存入dataTransfer
  const dragInfo = JSON.stringify({
    text: ev.target.textContent.trim(),
    className: ev.target.className
  });
  ev.dataTransfer.setData('application/json', dragInfo);
  console.log('You are dragging', ev.target.className);
}

function onDrop(ev) {
  ev.preventDefault();
  // 取出并解析拖拽数据
  const dragInfo = JSON.parse(ev.dataTransfer.getData('application/json'));
  // 确保找到正确的ul容器（避免target是内部li的情况）
  const targetUl = ev.target.closest('ul');
  const newLi = document.createElement('li');
  // 设置新元素的文本和类名
  newLi.textContent = dragInfo.text;
  newLi.className = dragInfo.className;
  targetUl.parentElement.appendChild(newLi);
}

function onOverDrop(ev) {
  ev.preventDefault();
}

CSS #

ul, li{border:1px solid green}

.container-left, .container-right {width:45%; margin-left:1%; float:left}

HTML #

<div class="container-left">
  <ul>
    <li class="A" 
        draggable="true" 
        ondragstart="onDrag(event)">A</li>
    
    <li class="B"  
        draggable="true" 
        ondragstart="onDrag(event)">B</li>
    
    <li  class="C"  
        draggable="true"
        ondragstart="onDrag(event)">C</li>
    
    <li class="D" 
        draggable="true"
        ondragstart="onDrag(event)">D</li>
  </ul>
</div>


<div class="container-right">
  <ul>
    <li> 1
      <ul ondrop="onDrop(event)" ondragover="onOverDrop(event)">
        <li class="1"></li>
      </ul>
    </li>
    <li> 2
      <ul ondrop="onDrop(event)" ondragover="onOverDrop(event)">
        <li class="2"></li>
      </ul>
    </li>
    <li> 3
      <ul ondrop="onDrop(event)" ondragover="onOverDrop(event)"> 
        <li class="3"></li>
      </ul>
    </li>
    <li> 4
      <ul ondrop="onDrop(event)" ondragover="onOverDrop(event)"> 
        <li class="4"></li>
      </ul>
    </li>
  </ul>
</div>

关键修改说明： #

• 存储拖拽数据：在onDrag中，把拖拽元素的文本和类名打包成JSON字符串，通过dataTransfer.setData()存入，选择application/json作为数据格式，避免和默认文本格式冲突。
• 读取拖拽数据：在onDrop中，用getData()取出数据并解析成对象，再给新创建的li设置对应的文本和类名。
• 修正目标定位：用closest('ul')替代直接取ev.target，防止drop事件触发在内部li上，导致后续父元素操作出错。

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