console 命令行工具 X clear

console

document.addEventListener('DOMContentLoaded', function() {
  const dragArea = document.getElementById('dragArea');
  let isDragging = false;
  let startX, startY;

  // 鼠标按下时
  dragArea.addEventListener('mousedown', function(e) {
    if (e.button === 0) { // 检查是否为鼠标左键
      isDragging = true;
      startX = e.clientX;
      startY = e.clientY;
      
      // 改变鼠标样式
      dragArea.style.cursor = 'grab';
    }
  });

  // 鼠标移动时
  dragArea.addEventListener('mousemove', function(e) {
    if (isDragging) {
        // 改变鼠标样式
      dragArea.style.cursor = 'grabbing';
      const deltaX = e.clientX - startX;
      const deltaY = e.clientY - startY;
      let top = parseFloat(dragArea.style.top) || 0
      let left = parseFloat(dragArea.style.left) || 0
      top += deltaY
      left += deltaX
      console.log('top',top)
      dragArea.style.top = `${top}px`
      dragArea.style.left = `${left}px`
      
      // 打印移动距离
      console.log(`Moved ${deltaX}px horizontally and ${deltaY}px vertically`);
      
      // 更新起始位置
      startX = e.clientX;
      startY = e.clientY;
    }
  });

  // 鼠标释放时
  dragArea.addEventListener('mouseup', function() {
    if (isDragging) {
      isDragging = false;
      // 恢复默认鼠标样式
      dragArea.style.cursor = 'default';
    }
  });

  // 当鼠标离开拖动区域时
  dragArea.addEventListener('mouseleave', function() {
    isDragging = false;
    dragArea.style.cursor = 'default';
  });
});

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Drag Area</title>
<style>
  #dragArea {
    width: 300px;
    height: 200px;
    background-color: lightblue;
    position: relative;
  }
</style>
</head>
<body>

<div id="dragArea"></div>

<script src="script.js"></script>
</body>
</html>

#dragArea{
    position: fixed;
    left:0;
    top:20px;
}