js实现拖动

2026-01-15 15:26:44JavaScript

实现拖动的步骤

HTML 结构 创建一个可拖动的元素和一个放置区域：

<div id="draggable" draggable="true">拖动我</div>
<div id="droptarget">放置区</div>

CSS 样式 为拖动和放置状态添加视觉反馈：

js实现拖动

#draggable {
  width: 100px;
  padding: 10px;
  background: #f0f0f0;
  border: 1px solid #ccc;
  cursor: move;
}

#droptarget {
  width: 200px;
  height: 200px;
  padding: 20px;
  border: 2px dashed #999;
  margin-top: 20px;
}

.dragging {
  opacity: 0.5;
}

.highlight {
  border-color: #00f;
  background: #eef;
}

JavaScript 逻辑 实现拖动事件处理：

const draggable = document.getElementById('draggable');
const droptarget = document.getElementById('droptarget');

// 拖动开始
draggable.addEventListener('dragstart', (e) => {
  e.dataTransfer.setData('text/plain', e.target.id);
  e.target.classList.add('dragging');
});

// 拖动结束
draggable.addEventListener('dragend', (e) => {
  e.target.classList.remove('dragging');
});

// 进入放置区域
droptarget.addEventListener('dragover', (e) => {
  e.preventDefault();
  e.target.classList.add('highlight');
});

// 离开放置区域
droptarget.addEventListener('dragleave', (e) => {
  e.target.classList.remove('highlight');
});

// 放置元素
droptarget.addEventListener('drop', (e) => {
  e.preventDefault();
  e.target.classList.remove('highlight');
  const id = e.dataTransfer.getData('text/plain');
  const draggedElement = document.getElementById(id);
  e.target.appendChild(draggedElement);
});

高级功能扩展

限制拖动方向 通过比较坐标实现水平或垂直限制：

js实现拖动

let startX;
draggable.addEventListener('dragstart', (e) => {
  startX = e.clientX;
});

document.addEventListener('dragover', (e) => {
  if (Math.abs(e.clientX - startX) > 10) { // 水平移动阈值
    e.preventDefault();
  }
});

自定义拖动图像 修改拖动时的预览图像：

draggable.addEventListener('dragstart', (e) => {
  const dragIcon = document.createElement('img');
  dragIcon.src = 'custom-icon.png';
  e.dataTransfer.setDragImage(dragIcon, 10, 10);
});

移动端触摸支持

触摸事件处理 为移动设备添加触摸支持：

let touchStartX, touchStartY;

draggable.addEventListener('touchstart', (e) => {
  touchStartX = e.touches[0].clientX;
  touchStartY = e.touches[0].clientY;
  e.target.classList.add('dragging');
});

document.addEventListener('touchmove', (e) => {
  const touch = e.touches[0];
  const xDiff = touch.clientX - touchStartX;
  const yDiff = touch.clientY - touchStartY;

  if (Math.abs(xDiff) > 5 || Math.abs(yDiff) > 5) {
    draggable.style.transform = `translate(${xDiff}px, ${yDiff}px)`;
  }
});

draggable.addEventListener('touchend', (e) => {
  e.target.classList.remove('dragging');
  e.target.style.transform = '';
});