1. 首頁 > 生活百科 > >

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

生活百科css

背景鼠標拖拽元素移動，算是一個稍微有點點復雜的交互 。
而在本文，我們就將打破常規，向大家介紹一種超強的僅僅使用純 CSS 就能夠實現的鼠標點擊拖拽效果 。
在之前的這篇文章中 -- 不可思議的純 CSS 實現鼠標跟隨 ， 我們介紹了非常多有意思的純 CSS 的鼠標跟隨效果，像是這樣：

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

文章插圖
但是，可以看到，上面的效果中，元素的移動不是很絲滑 。如果你了解上述的實現方式，就會知道它存在比較大的局限性 。
本文，我們還是僅僅通過 CSS ， 來實現一種絲滑的鼠標點擊拖動元素移動的效果 。
鼠標點擊拖拽跟隨效果OK，什么意思呢？我們先來看一個最最簡單的效果示意圖，實現點擊一個元素，能夠拖動元素進行移動的效果：
超強的純 CSS 鼠標點擊拖拽效果

文章插圖
好的，到這里，在繼續往下閱讀之前 ， 你可以停一停 。這種效果，正常而言，都是必須要借助 JavaScript 才能夠實現的 。從表現上來看：
  1. 首先拖拽元素過程，可以任意將元素進行移動
  2. 然后放置元素 ， 讓元素停留在另外一個地方
思考一下，如果不借助 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> 為橫向可拖拽改變寬度 。效果如下：
超強的純 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：

推薦閱讀