1. 首頁 > 生活百科 > >

超強的純 CSS 鼠標點擊拖拽效果( 二 )

生活百科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;}這樣，我們就得到了一個靈活可以拖動的元素：

超強的純 CSS 鼠標點擊拖拽效果

文章插圖
是的 ， 我們的整個效果，就需要借助這個特性進行實現 。
在此基礎上，我們可以嘗試將一個元素定位到上面這個可拖動放大縮小的元素的右下角，看著能不能實現上述的效果 。
簡單加一點代碼：
<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;}我們利用元素的偽元素實現了一個小球，放置在容器的右下角看看效果：
超強的純 CSS 鼠標點擊拖拽效果

文章插圖
如果我們再把整個設置了 resize: both 的邊框隱藏呢？那么效果就會是這樣：
超強的純 CSS 鼠標點擊拖拽效果

文章插圖
Wow，整個效果已經非常的接近了！只是，認真看的話，能夠看到一些瑕疵 ， 就是還是能夠看到設置了 resize 的元素的這個 ICON：
超強的純 CSS 鼠標點擊拖拽效果

文章插圖
這個也好解決，在 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，將滑塊的顏色設置為了透明色 。我們就得到了與文章一開始 ， 一模一樣的效果：
超強的純 CSS 鼠標點擊拖拽效果

文章插圖
解決溢出被裁剪問題當然 ， 這里有個很致命的問題 ， 如果需要移動的內容，遠比設置了 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%;}

推薦閱讀