当前位置：首页 > JavaScript

js实现方块拖曳

2026-03-15 16:00:53JavaScript

实现方块拖曳的步骤

HTML 结构 创建一个简单的方块元素，并为其添加 draggable 属性：

js实现方块拖曳

<div id="draggable-box" draggable="true">拖曳我</div>

CSS 样式 为方块添加基本样式，使其可见且可交互：

js实现方块拖曳

#draggable-box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  color: white;
  text-align: center;
  line-height: 100px;
  cursor: move;
}

JavaScript 逻辑 通过事件监听实现拖曳功能：

const box = document.getElementById('draggable-box');

box.addEventListener('dragstart', (e) => {
  e.dataTransfer.setData('text/plain', box.id);
  box.style.opacity = '0.5';
});

box.addEventListener('dragend', () => {
  box.style.opacity = '1';
});

document.addEventListener('dragover', (e) => {
  e.preventDefault(); // 允许放置
});

document.addEventListener('drop', (e) => {
  e.preventDefault();
  const draggedId = e.dataTransfer.getData('text/plain');
  const draggedElement = document.getElementById(draggedId);

  // 更新方块位置
  draggedElement.style.position = 'absolute';
  draggedElement.style.left = `${e.clientX - draggedElement.offsetWidth / 2}px`;
  draggedElement.style.top = `${e.clientY - draggedElement.offsetHeight / 2}px`;
});

注意事项

dragover 事件必须调用 preventDefault() 才能触发 drop 事件。
拖曳过程中可以调整元素的透明度或样式以提升用户体验。
若需限制拖曳范围，可在 drop 事件中检查坐标并调整位置。

兼容性优化

对于旧版本浏览器，可添加 touch 事件支持：

box.addEventListener('touchstart', handleTouchStart);
box.addEventListener('touchmove', handleTouchMove);

let initialX, initialY;

function handleTouchStart(e) {
  initialX = e.touches[0].clientX - box.offsetLeft;
  initialY = e.touches[0].clientY - box.offsetTop;
}

function handleTouchMove(e) {
  e.preventDefault();
  box.style.position = 'absolute';
  box.style.left = `${e.touches[0].clientX - initialX}px`;
  box.style.top = `${e.touches[0].clientY - initialY}px`;
}