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

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

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：
<div class="g-resize"></div>.g-resize { width: 100px; height: 100px; border: 1px solid deeppink;}如下，非常普通，没有什么特别的：
但是，通过给这个元素加上 resize: both 以及 overflow: scroll，此时，这个元素的大小就通过元素右下角的 ICON 进行拖动改变。
简单修改下我们的 CSS 代码：
.g-resize { width: 100px; height: 100px; border: 1px solid deeppink; resize: both; overflow: scroll;}这样，我们就得到了一个灵活可以拖动的元素：

文章插图
是的，我们的整个效果，就需要借助这个特性进行实现。
在此基础上，我们可以尝试将一个元素定位到上面这个可拖动放大缩小的元素的右下角，看着能不能实现上述的效果。
简单加一点代码：
<div class="g-resize"></div>.g-resize { position: relative; width: 20px; height: 20px; resize: both; overflow: scroll;}.g-resize::before { content: ""; position: absolute; bottom: 0; right: 0; width: 20px; height: 20px; border-radius: 50%; background: deeppink;}我们利用元素的伪元素实现了一个小球，放置在容器的右下角看看效果：

文章插图
如果我们再把整个设置了 resize: both 的边框隐藏呢？那么效果就会是这样：

文章插图
Wow，整个效果已经非常的接近了！只是，认真看的话，能够看到一些瑕疵，就是还是能够看到设置了 resize 的元素的这个 ICON：

文章插图
这个也好解决，在 Chrome 中，我们可以通过另外一个伪元素 ::-webkit-resizer ，设置这个 ICON 的隐藏。
根据 MDN - ::-webkit-resizer，它属于整体的滚动条伪类样式家族中的一员。
其中 ::-webkit-resizer 可以控制出现在某些元素底角的可拖动调整大小的滑块的样式。
所以，这里我就利用这个伪类：