如何使两个元素在同一个类中可拖动

在同一个类中使两个元素可拖动的方法有很多，以下是一种常见的实现方式：

首先，在HTML中给需要拖动的元素添加一个唯一的标识符，可以使用id属性或自定义的data属性。
在CSS中，为这些元素添加样式，比如设置position为relative或absolute，并设置z-index，以确保它们在其他元素之上。
在JavaScript中，通过获取需要拖动的元素的引用，使用addEventListener绑定mousedown事件。
在mousedown事件的回调函数中，记录鼠标按下时的坐标，并且为document绑定mousemove和mouseup事件。
在mousemove事件的回调函数中，计算鼠标移动的距离，并通过改变被拖动元素的位置样式（top和left属性）来实现拖动效果。
在mouseup事件的回调函数中，解绑mousemove和mouseup事件，并清除之前记录的坐标。

以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
.draggable {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  cursor: move;
}
</style>
</head>
<body>
<div id="element1" class="draggable">Element 1</div>
<div id="element2" class="draggable">Element 2</div>

<script>
// 获取需要拖动的元素的引用
var element1 = document.getElementById("element1");
var element2 = document.getElementById("element2");

// 记录鼠标按下时的坐标
var offsetX, offsetY;

// 绑定mousedown事件
element1.addEventListener("mousedown", function(e) {
  e.preventDefault();
  offsetX = e.clientX - parseInt(element1.style.left || 0);
  offsetY = e.clientY - parseInt(element1.style.top || 0);
  document.addEventListener("mousemove", moveElement1);
  document.addEventListener("mouseup", releaseElement1);
});

element2.addEventListener("mousedown", function(e) {
  e.preventDefault();
  offsetX = e.clientX - parseInt(element2.style.left || 0);
  offsetY = e.clientY - parseInt(element2.style.top || 0);
  document.addEventListener("mousemove", moveElement2);
  document.addEventListener("mouseup", releaseElement2);
});

// 鼠标移动时的回调函数
function moveElement1(e) {
  element1.style.left = e.clientX - offsetX + "px";
  element1.style.top = e.clientY - offsetY + "px";
}

function moveElement2(e) {
  element2.style.left = e.clientX - offsetX + "px";
  element2.style.top = e.clientY - offsetY + "px";
}

// 鼠标释放时的回调函数
function releaseElement1() {
  document.removeEventListener("mousemove", moveElement1);
  document.removeEventListener("mouseup", releaseElement1);
}

function releaseElement2() {
  document.removeEventListener("mousemove", moveElement2);
  document.removeEventListener("mouseup", releaseElement2);
}
</script>
</body>
</html>

这是一个简单的实现，你可以根据具体的需求进行修改和扩展。此外，腾讯云提供了丰富的云计算产品和服务，供开发者使用，可以根据实际需求选择适合的产品。具体产品介绍和链接地址可以在腾讯云官网进行查找。