超强的纯 CSS 鼠标点击拖拽效果 _生活百科

背景鼠标拖拽元素移动，算是一个稍微有点点复杂的交互。
而在本文，我们就将打破常规，向大家介绍一种超强的仅仅使用纯 CSS 就能够实现的鼠标点击拖拽效果。
在之前的这篇文章中 -- 不可思议的纯 CSS 实现鼠标跟随，我们介绍了非常多有意思的纯 CSS 的鼠标跟随效果，像是这样：

文章插图
但是，可以看到，上面的效果中，元素的移动不是很丝滑。如果你了解上述的实现方式，就会知道它存在比较大的局限性。
本文，我们还是仅仅通过 CSS ，来实现一种丝滑的鼠标点击拖动元素移动的效果。
鼠标点击拖拽跟随效果OK，什么意思呢？我们先来看一个最最简单的效果示意图，实现点击一个元素，能够拖动元素进行移动的效果：

文章插图
好的，到这里，在继续往下阅读之前，你可以停一停。这种效果，正常而言，都是必须要借助 JavaScript 才能够实现的。从表现上来看：

首先拖拽元素过程，可以任意将元素进行移动
然后放置元素，让元素停留在另外一个地方

思考一下，如果不借助 JavaScript 的话，有办法将元素小球从 A 点移动到 B 点么？这个效果完全就不像是纯 CSS 能够完成的。
答案必然是可以的！整个过程也非常之巧妙，这里我们核心需要利用强大的 resize 属性。以及，配合通过构建一种巧妙的布局，去解决可能会遇到的各种难题。
使用 resize，构建可拖拽改变大小的元素首先，我们利用 resize 属性来实现一个可改变大小的元素。
什么是 resize 呢？根据 MDN -- resize：该 CSS 属性允许你控制一个元素的可调整大小性。
其 CSS 语法如下所示：
{/* Keyword values */ resize: none; resize: both; resize: horizontal; resize: vertical; resize: block; resize: inline;}简单解释一下：

resize: none：元素不能被用户缩放
resize: both：允许用户在水平和垂直方向上调整元素的大小
resize: horizontal：允许用户在水平方向上调整元素的大小
resize: vertical：允许用户在垂直方向上调整元素的大小
resize: block：根据书写模式（writing-mode）和方向值（direction），元素显示允许用户在块方向上（block）水平或垂直调整元素大小的机制。
resize: inline：根据书写模式（writing-mode）和方向值（direction），元素显示一种机制，允许用户在内联方向上（inline）水平方向或垂直方向调整元素的大小。

看一个最简单的 DEMO：
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aut qui labore rerum placeat similique hic consequatur tempore doloribus aliquid alias, nobis voluptates. Perferendis, voluptate placeat esse soluta deleniti id!</p>p { width: 200px; height: 200px; resize: horizontal; overflow: scroll;}这里，我们设置了一个长宽为 200px 的 <p> 为横向可拖拽改变宽度。效果如下：

文章插图
简单总结一些小技巧：

resize 的生效，需要配合 overflow: scroll，当然，准确的说法是，overflow 不是 visible，或者可以直接作用于替换元素譬如图像、<video> 及 <iframe>、<textarea> 等
我们可以通过 resize 的 horizontal、vertical、both 来设置横向拖动、纵向拖动、横向纵向皆可拖动。
可以配合容器的 max-width、min-width、max-height、min-height 限制可拖拽改变的一个范围

这里，如果你的对 resize 还有所疑惑，或者想了解更多 resize 的有趣用法，可以看看我的这篇文章：CSS 奇思妙想 | 使用 resize 实现强大的图片拖拽切换预览功能。
将 resize 应用到本文实例中OK，接下来，我们将 resize 实际运用到我们本文的例子中去，首先，我们先简单实现一个 DIV：