按住拖动页面

实现鼠标按住拖动页面的功能。

基础实现

const container = document.querySelector('.draggable');
let isDragging = false;
let startX, startY, scrollLeft, scrollTop;

container.addEventListener('mousedown', (e) => {
  isDragging = true;
  container.classList.add('dragging');
  
  // 记录起始位置和滚动位置
  startX = e.pageX - container.offsetLeft;
  startY = e.pageY - container.offsetTop;
  scrollLeft = container.scrollLeft;
  scrollTop = container.scrollTop;
  
  // 禁止选中文本
  e.preventDefault();
});

container.addEventListener('mouseleave', () => {
  isDragging = false;
  container.classList.remove('dragging');
});

container.addEventListener('mouseup', () => {
  isDragging = false;
  container.classList.remove('dragging');
});

container.addEventListener('mousemove', (e) => {
  if (!isDragging) return;
  e.preventDefault();
  
  // 计算移动距离
  const x = e.pageX - container.offsetLeft;
  const y = e.pageY - container.offsetTop;
  
  // 计算滚动
  const walkX = (x - startX) * 2; // 滚动速度倍率
  const walkY = (y - startY) * 2;
  
  container.scrollLeft = scrollLeft - walkX;
  container.scrollTop = scrollTop - walkY;
});

CSS 样式

.draggable {
  cursor: grab;
  overflow: auto;
  user-select: none; /* 禁止选中文本 */
}

.draggable.dragging {
  cursor: grabbing;
}

完整示例

<div class="draggable" id="dragContainer">
  <div class="content">
    <!-- 可拖动的内容 -->
  </div>
</div>

<style>
  .draggable {
    width: 400px;
    height: 300px;
    overflow: auto;
    cursor: grab;
    user-select: none;
    border: 1px solid #ccc;
  }
  
  .draggable.dragging {
    cursor: grabbing;
  }
</style>

<script>
  const container = document.getElementById('dragContainer');
  let isDown = false;
  let startX, scrollLeft;
  let startY, scrollTop;

  container.addEventListener('mousedown', (e) => {
    isDown = true;
    container.classList.add('active');
    startX = e.pageX - container.offsetLeft;
    scrollLeft = container.scrollLeft;
    startY = e.pageY - container.offsetTop;
    scrollTop = container.scrollTop;
  });

  container.addEventListener('mouseleave', () => {
    isDown = false;
    container.classList.remove('active');
  });

  container.addEventListener('mouseup', () => {
    isDown = false;
    container.classList.remove('active');
  });

  container.addEventListener('mousemove', (e) => {
    if (!isDown) return;
    e.preventDefault();
    
    const x = e.pageX - container.offsetLeft;
    const walk = (x - startX) * 2;
    container.scrollLeft = scrollLeft - walk;
    
    const y = e.pageY - container.offsetTop;
    const walkY = (y - startY) * 2;
    container.scrollTop = scrollTop - walkY;
  });
</script>

触摸设备支持

// 添加触摸支持
container.addEventListener('touchstart', (e) => {
  const touch = e.touches[0];
  isDragging = true;
  startX = touch.pageX - container.offsetLeft;
  startY = touch.pageY - container.offsetTop;
  scrollLeft = container.scrollLeft;
  scrollTop = container.scrollTop;
}, { passive: false });

container.addEventListener('touchmove', (e) => {
  if (!isDragging) return;
  e.preventDefault();
  
  const touch = e.touches[0];
  const x = touch.pageX - container.offsetLeft;
  const y = touch.pageY - container.offsetTop;
  
  const walkX = (x - startX) * 2;
  const walkY = (y - startY) * 2;
  
  container.scrollLeft = scrollLeft - walkX;
  container.scrollTop = scrollTop - walkY;
}, { passive: false });

container.addEventListener('touchend', () => {
  isDragging = false;
});