1. 首頁 > 生活百科 > >

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

生活百科css

而像是這樣 ， 是一個更為復雜的布局內容展示（當然下面展示的也比較簡單，實際中可以想象成任意復雜結構內容）：

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

文章插圖
如果將這個結構，扔到上面的 g-resize 中：
<div class="g-resize">    <div class="g-content"></div></div>那么就會因為設置了 overflow: scroll 的原因，將完全看不到，只剩下一小塊：
超強的純 CSS 鼠標點擊拖拽效果

文章插圖
為了解決這個問題，我們得修改原本的 DOM 結構，另辟蹊徑 。
方法有很多，譬如可以利用 Grid  布局的一些特性 。當然，這里我們只需要巧妙的加多一層 ， 就可以完全解決這個問題 。
我們來實現這樣一個布局：
<div class="g-container">    <div class="g-resize"></div>    <div class="g-content"></div></div>解釋一下上述代碼，其中：
  1. g-container 設置為絕對定位加上 display: inline-block，這樣其盒子大小就可以由內部正常流式布局盒子的大小撐開
  2. g-resize 設置為 position: relative 并且設置 resize，負責提供一個可拖動大小元素，在這個元素的變化過程中，就能動態改變父容器的高寬
  3. g-content 實際內容盒子，通過 position: absolute 定位到容器的右下角即可
看看完整的 CSS 代碼：
.g-container {    position: absolute;    display: inline-block;}.g-resize {    content: "";    position: relative;    width: 20px;    height: 20px;    border-radius: 50%;    resize: both;    overflow: scroll;    z-index: 1;}.g-content {    position: absolute;    bottom: -80px;    right: -80px;    width: 100px;    height: 100px;    background: black;    pointer-event: none;    &::before {        content: "";        position: absolute;        width: 20px;        height: 20px;        background: yellow;        border-radius: 50%;        transition: .3s;    }}.g-container:hover .g-content::before {    transform: scale(1.1);    box-shadow: -2px 2px 4px -4px #333, -4px 4px 8px -4px #333;}.g-resize::-webkit-resizer {    background-color: transparent;}下圖中，你看到的所有元素 ， 都只是 g-content 呈現出來的元素，整個效果就是這樣：
超強的純 CSS 鼠標點擊拖拽效果

文章插圖
是的，可能你會有所疑惑 ， 下面我用簡單不同顏色，標識不同不同的 DOM 結構，方便你去理解 。
  1. 紅色邊框表示整個 g-container 的大小
  2. 【超強的純 CSS 鼠標點擊拖拽效果】用藍色矩形表示設置了 g-resize 元素的大小
  3. 關掉 ::-webkit-resizer 的透明設置，展示出 resize 框的可拖拽 ICON
.g-container {    border: 3px solid red;}.g-resize {    content: "";    background: blue;    resize: both;    overflow: scroll;}.g-resize::-webkit-resizer {    // background-color: transparent;}看看這個圖，整個原理基本就比較清晰的浮現了出來：
超強的純 CSS 鼠標點擊拖拽效果

文章插圖
完整的原理代碼，你可以戳這里：CodePen Demo -- Pure CSS Auto Drag Demo
實際應用OK ， 用了比較大篇幅對原理進行了描述 。下面我們舉一個實際的應用場景 。使用上述技巧制作的可拖動便簽貼 。靈感來自 -- scottkellum 。

推薦閱讀