如何仅用CSS实现HTML中div元素的可拖拽效果？

先说结论：纯CSS做不到和draggable="true"完全一样的原生拖拽效果——draggable是HTML元素的属性，CSS只管样式渲染，改不了HTML属性，也处理不了拖拽的交互逻辑（比如元素跟着鼠标动、拖放事件响应这些）。

用CSS做视觉上的拖拽提示 #

如果只是想让元素看起来“能拖拽”，可以用CSS搞视觉提示：

div {
  cursor: grab; /* 鼠标放上去显示抓取图标 */
  user-select: none; /* 拖拽时不会选中文本 */
}

div:active {
  cursor: grabbing; /* 按住鼠标时显示正在抓取的图标 */
}

但这只是样子货，元素不会真的移动，也没有拖放的实际功能。

极简拖拽实现（要加一点JS） #

要是想要真的能拖，必须用JavaScript，但可以写超简单的代码：

<div id="draggable">
   <img src="random image (doesn't matter)">
</div>

<style>
#draggable {
  cursor: grab;
  user-select: none;
  position: absolute; /* 让元素能自由移动 */
}

#draggable:active {
  cursor: grabbing;
}
</style>

<script>
const dragBox = document.getElementById('draggable');
let dragging = false;
let startX, startY, leftOffset, topOffset;

dragBox.addEventListener('mousedown', (e) => {
  dragging = true;
  startX = e.clientX;
  startY = e.clientY;
  leftOffset = dragBox.offsetLeft;
  topOffset = dragBox.offsetTop;
});

document.addEventListener('mousemove', (e) => {
  if (!dragging) return;
  dragBox.style.left = `${leftOffset + e.clientX - startX}px`;
  dragBox.style.top = `${topOffset + e.clientY - startY}px`;
});

document.addEventListener('mouseup', () => {
  dragging = false;
});
</script>

这段JS只实现最基础的拖拽移动，比你之前看到的复杂方案轻便太多。

内容的提问来源于stack exchange，提问作者tisme