使用javascript拖动多个div

<div id="div1" class="draggable">Div 1</div>
<div id="div2" class="draggable">Div 2</div>
<div id="div3" class="draggable">Div 3</div>

// 获取所有拖动元素的引用
var draggables = document.getElementsByClassName("draggable");

// 保存当前拖动元素的引用
var activeDraggable = null;

// 保存拖动元素的初始位置
var initialX;
var initialY;

// 添加mousedown事件处理程序，当鼠标按下时开始拖动
for (var i = 0; i < draggables.length; i++) {
  draggables[i].addEventListener("mousedown", function (e) {
    // 保存当前拖动元素的引用
    activeDraggable = e.target;

    // 计算鼠标点击位置相对于拖动元素的初始偏移量
    initialX = e.clientX - activeDraggable.offsetLeft;
    initialY = e.clientY - activeDraggable.offsetTop;

    // 设置拖动元素的样式为绝对定位
    activeDraggable.style.position = "absolute";
  });
}

// 添加mousemove事件处理程序，当鼠标移动时更新拖动元素的位置
document.addEventListener("mousemove", function (e) {
  if (activeDraggable) {
    // 阻止默认的拖动行为
    e.preventDefault();

    // 计算鼠标移动距离
    var currentX = e.clientX - initialX;
    var currentY = e.clientY - initialY;

    // 更新拖动元素的位置
    activeDraggable.style.left = currentX + "px";
    activeDraggable.style.top = currentY + "px";
  }
});

// 添加mouseup事件处理程序，当鼠标释放时停止拖动
document.addEventListener("mouseup", function () {
  // 清除当前拖动元素的引用
  activeDraggable = null;
});