如何在HTML中访问拖放操作里的被拖拽元素与放置元素？

当dragenter事件绑定在放置元素上时，要访问被拖拽元素，核心是利用拖拽事件的dataTransfer对象传递被拖拽元素的标识：

1. 在拖拽元素的dragstart事件中存储标识
   给需要拖拽的元素绑定dragstart事件，把元素的ID（或其他唯一标识）存入dataTransfer：

// 假设拖拽元素的ID是"drag-item"
document.getElementById('drag-item').addEventListener('dragstart', function(e) {
  // 用通用格式存储元素ID
  e.dataTransfer.setData('text/plain', this.id);
});

2. 在放置元素的dragenter事件中获取被拖拽元素
   在放置元素的dragenter事件回调里，通过dataTransfer.getData()取出存储的ID，再通过ID获取被拖拽元素：

// 假设放置元素的ID是"drop-zone"
document.getElementById('drop-zone').addEventListener('dragenter', function(e) {
  // 必须阻止默认行为，否则会干扰后续放置流程
  e.preventDefault();
  // 取出存储的元素ID
  const draggedId = e.dataTransfer.getData('text/plain');
  // 获取被拖拽元素
  const draggedElement = document.getElementById(draggedId);
  // 此时可对draggedElement进行操作
  console.log('被拖拽元素：', draggedElement);
});

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