javaScript 拖动盒子代码

以下是一个简单的 JavaScript 拖动盒子的代码示例：

HTML 代码：

<div id="myBox" style="width: 100px; height: 100px; background-color: blue; position: absolute; left: 0; top: 0;"></div>

JavaScript 代码：

var myBox = document.getElementById("myBox");
var isDragging = false;
var prevX, prevY;

myBox.addEventListener("mousedown", function(e) {
  isDragging = true;
  prevX = e.clientX;
  prevY = e.clientY;
});

document.addEventListener("mousemove", function(e) {
  if (isDragging) {
    var deltaX = e.clientX - prevX;
    var deltaY = e.clientY - prevY;
    var newX = parseInt(myBox.style.left) + deltaX;
    var newY = parseInt(myBox.style.top) + deltaY;
    myBox.style.left = newX + "px";
    myBox.style.top = newY + "px";
    prevX = e.clientX;
    prevY = e.clientY;
  }
});

document.addEventListener("mouseup", function(e) {
  isDragging = false;
});

注释：

1. 首先通过 `document.getElementById` 获取要拖动的 DOM 元素。
2. 在鼠标按下时，设置一个标志位 `isDragging`，表示正在拖动。
3. 记录下鼠标按下时的坐标 `prevX` 和 `prevY`。
4. 在鼠标移动时，如果 `isDragging` 为真，则根据当前鼠标坐标和上一次坐标的差值计算出新的位置，并设置到元素的 `left` 和 `top` 属性上。
5. 在鼠标抬起时，将 `isDragging` 标志位设为假。