监听div拖拽事件交换div中的内容

监听div元素的拖拽事件并交换其中的内容，通常需要结合HTML、CSS和JavaScript来实现。以下是基本步骤：

1. HTML结构：
创建两个div元素，并给他们设置唯一的ID，例如`dragElement`和`dropElement`。

<div id="dragElement" draggable="true">拖动我</div>
<div id="dropElement"></div>

2. CSS样式：
为了让div能被拖动，设置`draggable`属性，并定义一些视觉效果，如透明度变化。

#dragElement {
  -webkit-user-select: none;
  user-select: none;
  cursor: move;
  opacity: .8; /* 可视化提示 */
}

#dropElement {
  border: 2px dashed #ccc;
}

3. JavaScript事件处理：
使用JavaScript的`dragstart`, `dragover`, `drop`和`dragend`事件来处理拖放过程。

let dragStartData = null;

document.getElementById('dragElement').addEventListener('dragstart', function(e) {
  dragStartData = e.target.innerText; // 获取开始拖动时的数据
  e.dataTransfer.setData('text/plain', dragStartData);
});

document.getElementById('dropElement').addEventListener('dragover', function(e) {
  e.preventDefault(); // 阻止默认行为，防止阻止选择
});

document.getElementById('dropElement').addEventListener('drop', function(e) {
  e.preventDefault();
  let data = e.dataTransfer.getData('text/plain');
  this.innerHTML = dragStartData; // 将拖动数据放到目标元素中
  e.target.innerHTML = data; // 将原始数据放在原来的位置
});

document.getElementById('dragElement').addEventListener('dragend', function() {
  this.innerHTML = dragStartData; // 拖动结束后恢复原始内容
});