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

<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 可以控制出现在某些元素底角的可拖动调整大小的滑块的样式。
所以，这里我就利用这个伪类：
.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;}.g-resize::-webkit-resizer { background-color: transparent;}这样，这里的核心在于利用了 .g-resize::-webkit-resizer 中的 background-color: transparent，将滑块的颜色设置为了透明色。我们就得到了与文章一开始，一模一样的效果：

文章插图
解决溢出被裁剪问题当然，这里有个很致命的问题，如果需要移动的内容，远比设置了 resize 的容器要大，或者其初始位置不在该容器内，超出了的部分因为设置了 overflow: scroll，将无法看到。
因此上述方案存在比较大的缺陷。
举个例子，假设我们需要被拖动的元素不再是一个有这样一个简单的结构：
<div class="g-content"></div>.g-content { width: 100px; height: 100px; background: black; pointer-event: none; &::before { content: ""; position: absolute; width: 20px; height: 20px; background: yellow; border-radius: 50%;}