当前位置：首页 > CSS

css制作拖动层

2026-04-01 22:52:15CSS

CSS 制作拖动层

使用 CSS 结合 JavaScript 可以实现拖动层的效果。以下是实现拖动层的几种方法：

使用纯 CSS 和 HTML5 拖放 API

HTML5 提供了拖放 API，可以结合 CSS 实现拖动效果。

<div id="draggable" draggable="true">拖动我</div>

#draggable {
  width: 100px;
  height: 100px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  cursor: move;
}

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

draggable.addEventListener('dragstart', (e) => {
  e.dataTransfer.setData('text/plain', e.target.id);
});

document.addEventListener('dragover', (e) => {
  e.preventDefault();
});

document.addEventListener('drop', (e) => {
  e.preventDefault();
  const id = e.dataTransfer.getData('text/plain');
  const element = document.getElementById(id);
  element.style.left = `${e.clientX}px`;
  element.style.top = `${e.clientY}px`;
});

使用 CSS 和 JavaScript 实现拖动

通过监听鼠标事件实现拖动效果。

<div id="draggable">拖动我</div>

#draggable {
  width: 100px;
  height: 100px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  position: absolute;
  cursor: move;
}

const draggable = document.getElementById('draggable');
let isDragging = false;
let offsetX, offsetY;

draggable.addEventListener('mousedown', (e) => {
  isDragging = true;
  offsetX = e.clientX - draggable.getBoundingClientRect().left;
  offsetY = e.clientY - draggable.getBoundingClientRect().top;
});

document.addEventListener('mousemove', (e) => {
  if (!isDragging) return;
  draggable.style.left = `${e.clientX - offsetX}px`;
  draggable.style.top = `${e.clientY - offsetY}px`;
});

document.addEventListener('mouseup', () => {
  isDragging = false;
});

使用 CSS 和第三方库

使用第三方库如 interact.js 可以简化拖动实现。

css制作拖动层

<div id="draggable">拖动我</div>

#draggable {
  width: 100px;
  height: 100px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  position: absolute;
  cursor: move;
}

interact('#draggable').draggable({
  onmove: function (event) {
    const target = event.target;
    const x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
    const y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
    target.style.transform = `translate(${x}px, ${y}px)`;
    target.setAttribute('data-x', x);
    target.setAttribute('data-y', y);
  }
});