僅僅使用純 CSS 鼠標(biāo)點(diǎn)擊拖拽效果

背景

鼠標(biāo)拖拽元素移動(dòng)，算是一個(gè)稍微有點(diǎn)點(diǎn)復(fù)雜的交互。

創(chuàng)新互聯(lián)公司2013年開(kāi)創(chuàng)至今，先為武漢等服務(wù)建站，武漢等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為武漢企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。

而在本文，我們就將打破常規(guī)，向大家介紹一種超強(qiáng)的僅僅使用純 CSS 就能夠?qū)崿F(xiàn)的鼠標(biāo)點(diǎn)擊拖拽效果。

在之前的這篇文章中 -- ^[1]，我們介紹了非常多有意思的純 CSS 的鼠標(biāo)跟隨效果，像是這樣：

但是，可以看到，上面的效果中，元素的移動(dòng)不是很絲滑。如果你了解上述的實(shí)現(xiàn)方式，就會(huì)知道它存在比較大的局限性。

本文，我們還是僅僅通過(guò) CSS，來(lái)實(shí)現(xiàn)一種絲滑的鼠標(biāo)點(diǎn)擊拖動(dòng)元素移動(dòng)的效果。

鼠標(biāo)點(diǎn)擊拖拽跟隨效果

OK，什么意思呢？我們先來(lái)看一個(gè)最最簡(jiǎn)單的效果示意圖，實(shí)現(xiàn)點(diǎn)擊一個(gè)元素，能夠拖動(dòng)元素進(jìn)行移動(dòng)的效果：

好的，到這里，在繼續(xù)往下閱讀之前，你可以停一停。這種效果，正常而言，都是必須要借助 JavaScript 才能夠?qū)崿F(xiàn)的。從表現(xiàn)上來(lái)看：

首先拖拽元素過(guò)程，可以任意將元素進(jìn)行移動(dòng)
然后放置元素，讓元素停留在另外一個(gè)地方

思考一下，如果不借助 JavaScript 的話，有辦法將元素小球從 A 點(diǎn)移動(dòng)到 B 點(diǎn)么？這個(gè)效果完全就不像是純 CSS 能夠完成的。

答案必然是可以的！整個(gè)過(guò)程也非常之巧妙，這里我們核心需要利用強(qiáng)大的 resize 屬性。以及，配合通過(guò)構(gòu)建一種巧妙的布局，去解決可能會(huì)遇到的各種難題。

使用 resize，構(gòu)建可拖拽改變大小的元素

首先，我們利用 resize 屬性來(lái)實(shí)現(xiàn)一個(gè)可改變大小的元素。

什么是 resize 呢？根據(jù) [2]：該 CSS 屬性允許你控制一個(gè)元素的可調(diào)整大小性。

其 CSS 語(yǔ)法如下所示：

{
  resize: none;
  resize: both;
  resize: horizontal;
  resize: vertical;
  resize: block;
  resize: inline;
}

簡(jiǎn)單解釋一下：

resize: none：元素不能被用戶縮放。
resize: both：允許用戶在水平和垂直方向上調(diào)整元素的大小。
resize: horizontal：允許用戶在水平方向上調(diào)整元素的大小。
resize: vertical：允許用戶在垂直方向上調(diào)整元素的大小。
resize: block：根據(jù)書寫模式（writing-mode）和方向值（direction），元素顯示允許用戶在塊方向上（block）水平或垂直調(diào)整元素大小的機(jī)制。
resize: inline：根據(jù)書寫模式（writing-mode）和方向值（direction），元素顯示一種機(jī)制，允許用戶在內(nèi)聯(lián)方向上（inline）水平方向或垂直方向調(diào)整元素的大小。

看一個(gè)最簡(jiǎn)單的 DEMO：

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 {
    width: 200px;
    height: 200px;
    resize: horizontal;
    overflow: scroll;
}

這里，我們?cè)O(shè)置了一個(gè)長(zhǎng)寬為 200px 的

為橫向可拖拽改變寬度。效果如下：

簡(jiǎn)單總結(jié)一些小技巧：

resize? 的生效，需要配合 overflow: scroll，當(dāng)然，準(zhǔn)確的說(shuō)法是，overflow 不是 visible，或者可以直接作用于替換元素譬如圖像、

網(wǎng)站建設(shè)知識(shí)

僅僅使用純 CSS 鼠標(biāo)點(diǎn)擊拖拽效果

背景

鼠標(biāo)點(diǎn)擊拖拽跟隨效果

使用 resize，構(gòu)建可拖拽改變大小的元素

使用 resize，構(gòu)建可拖拽改變大小的元素