无需 JavaScript：解锁 CSS 中的拖拽魔力

见解分享

2023-10-28 05:29:30

纯 CSS 也能实现拖拽效果？乍一听让人匪夷所思，但经过一番探索和实验，我发现 CSS 的确拥有实现这一功能的潜力。尽管 JavaScript 仍然是处理复杂交互的首选，但 CSS 也能为我们提供更轻量级的替代方案。

CSS 如何实现拖拽效果？

CSS 实现拖拽效果的关键在于利用伪元素和事件监听器。伪元素充当拖动手柄，而事件监听器则负责捕获鼠标事件并触发相应的拖拽行为。

创建一个拖动手柄：

首先，我们需要创建一个拖动手柄，它将作为拖拽操作的起点。我们可以使用伪元素 ::before 或 ::after 来创建拖动手柄，并对其应用特定的样式以使其在视觉上与其他元素区分开来。

监听鼠标事件：

接下来，我们需要监听鼠标事件，例如 mousedown 和 mousemove。当鼠标按下拖动手柄时，我们使用 mousedown 事件启动拖拽操作，并在鼠标移动时使用 mousemove 事件更新拖拽元素的位置。

更新元素位置：

为了更新拖拽元素的位置，我们需要使用 CSS 的 transform 属性。我们可以通过更新元素的 translate 值来移动它，从而实现流畅的拖拽效果。

示例：

下面是一个简单的 CSS 拖拽效果示例：

.draggable {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background: #ccc;
}

.draggable::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  background: #000;
  cursor: grab;
}

.draggable:active {
  cursor: grabbing;
}

.draggable:active::before {
  cursor: grabbing;
}