純 CSS 實(shí)現(xiàn)拖拽效果的代碼
我要評(píng)論發(fā)揮你的想象，CSS也能實(shí)現(xiàn)拖拽效果。
一、拖拽效果示例
這是移動(dòng)端很常見的一個(gè)效果，可以按住拖來拖去，比如下面的 起點(diǎn)中文網(wǎng) [1] 觸屏版：
這類效果用JS可以很容易實(shí)現(xiàn)，無非就是多了一些計(jì)算，多考慮了一些臨界場(chǎng)景，然后代碼量也多了一些。不過，經(jīng)過我的一番腦洞，發(fā)現(xiàn)CSS也能幾乎實(shí)現(xiàn)這一效果，接著往下看。
二、CSS實(shí)現(xiàn)原理
在傳統(tǒng) web 中，頁面滾動(dòng)是一個(gè)很常見交互，操作上就是 利用鼠標(biāo)滾輪或者直接拖動(dòng)滾動(dòng)條 。但是，移動(dòng)端可不一樣， 直接用手指拖動(dòng)頁面就可以滾動(dòng)了。 通常頁面是要么垂直方向滾動(dòng)，要么水平方向滾動(dòng)， 如果兩個(gè)方向都可以滾動(dòng)呢？ 例如
.dragbox{
width: 300px;
height: 300px;
overflow: auto
}
.dragcon{
width: 500px;
height: 500px;
}
只需要內(nèi)部元素寬高都大于容器就實(shí)現(xiàn)兩個(gè)方向的滾動(dòng)了（記得設(shè)置 overflow:auto ），示意如下
一般情況下，鼠標(biāo)滾輪只能同時(shí)滾動(dòng)一個(gè)方向（按住 Shift 可以滾動(dòng)另一方向），但是移動(dòng)端可以 直接拖著內(nèi)容任意滾動(dòng) ，如下所示
現(xiàn)在，在內(nèi)容中間添加一個(gè)元素，跟隨內(nèi)容區(qū)域一起滾動(dòng)
接下來，把后面的文本隱藏起來
是不是有點(diǎn) 拖拽 的味道了？原理就是這么簡(jiǎn)單！
三、CSS實(shí)現(xiàn)細(xì)節(jié)
首先確定拖拽目標(biāo)與拖拽容器的尺寸關(guān)系，假設(shè)拖拽目標(biāo)的尺寸是 w * h ，那么很容易得出的尺寸關(guān)系為： 內(nèi)部尺寸是容器的2倍減去拖拽目標(biāo)的尺寸
.dragbox{
width: 100%;
height: 100%;
}
.dragcon{
width: calc(200% - w);
height: calc(200% - h);
}
用一張動(dòng)圖描述如下（中間的橙色塊塊表示拖拽目標(biāo)）
四、CSS實(shí)現(xiàn)布局
接下來需要把這個(gè)特性加入到頁面當(dāng)中，這里列舉了兩種布局
1. fixed 定位
現(xiàn)在直接把剛才的布局添加到頁面上，并添加 fixed 定位
<body>
...頁面上的其他元素
<div class=“dragbox”>
<div class=“dragcon”></div>
<div class=“ball”></div> <!--拖拽元素-->
</div>
</body>
關(guān)鍵樣式如下
.dragbox{
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
overflow: auto
}
層級(jí)示意關(guān)系如下
這樣一來， dragbox 肯定把頁面原有的部分遮擋了，所以還需要添加 pointer-events: none; 同時(shí)在拖拽時(shí)添加 pointer-events: all
.dragbox{
/*...*/
pointer-events: none;
}
.ball{
/*...*/
pointer-events: all;
}
.dragbox.active{
/*...*/
pointer-events: all;
}
借助 JS 可以在按下時(shí)觸發(fā)外層容器滾動(dòng)
ball.addEventListener('touchstart',(ev)=>{
dragbox.classList.add('active');
})
document.addEventListener('touchend',()=>{
dragbox.classList.remove('active');
})
實(shí)際效果如下
完整代碼可訪問https://codepen.io/xboxyan/pen/PobwxBK（PC訪問請(qǐng)打開移動(dòng)端模式）
也可直接掃描以下二維碼
1. absolute 定位 + 層級(jí)
前面一種布局由于 fixed 定位層級(jí)的影響，不得不借助 JS 來動(dòng)態(tài)改變?nèi)萜鞯臓顟B(tài)，有沒有什么辦法可以實(shí)現(xiàn) 既可以拖拽，又不影響原有頁面 呢？下面來看這一種布局，用到了 ab s olute 定位
這里需要對(duì)原有頁面包裹一層 div 容器，如下
<body>
<div class=“dragbox”>
<div class=“dragcon”></div>
<div class=“ball”></div>
</div>
<div class=“body”> <!--單獨(dú)用一層實(shí)現(xiàn)頁面滾動(dòng)-->
...頁面上的其他元素
</div>
</body>
關(guān)鍵樣式如下
.dragbox{
position: absolute;
width: 100%;
height: 100%;
overflow: auto;
}
.body{
position: relative;
height: 100%;
overflow: auto;
}
.ball{
position: relative;
z-index: 10; /*拖拽目標(biāo)的層級(jí)設(shè)置高一點(diǎn)*/
}
現(xiàn)在層級(jí)關(guān)系就變成了這樣
這里原先頁面內(nèi)容在層級(jí)上處于 dragbox 和 拖拽目標(biāo) 之間，所以在拖拽時(shí)也不會(huì)影響到原有頁面的滾動(dòng)， 無需任何 JS 處理
完整代碼可訪問https://codepen.io/xboxyan/pen/bGBNQxL（PC訪問請(qǐng)打開移動(dòng)端模式）
也可直接掃描以下二維碼
提示：上面兩種布局方式，第一種方式適應(yīng)性更好，不影響現(xiàn)有項(xiàng)目；第二種體驗(yàn)更好，但是會(huì)使用 div 作為頁面滾動(dòng)容器，會(huì)對(duì)頁面結(jié)構(gòu)做一定的改動(dòng)，可以根據(jù)實(shí)際情況自行選擇。
五、CSS實(shí)現(xiàn)其他功能
1. 吸附功能
很多時(shí)候，在拖拽結(jié)束時(shí)需要讓它自動(dòng)吸附在邊緣，就如同文章開頭的示意圖一樣。那么，通過吸附，可以聯(lián)想到什么屬性呢？
答案就是 CSS Scroll Snap [2]
<body>
...頁面上的其他元素
<div class=“dragbox”>
<div class=“dragcon”>A</div>
<div class=“dragcon”>B</div>
<div class=“ball”></div>
</div>
</body>
下面是關(guān)鍵樣式
.dragbox{
...
scroll-snap-type: x mandatory;
}
.dragcon{
scroll-snap-align: start;
}
實(shí)際效果如下
完整代碼可訪問https://codepen.io/xboxyan/pen/XWNJyPw（PC訪問請(qǐng)打開移動(dòng)端模式）
也可直接掃描以下二維碼
1. 設(shè)置初始位置
默認(rèn)情況下，拖拽目標(biāo)是唯有右下角的，如何位于左下角呢？很簡(jiǎn)單，這里拖拽是滾動(dòng)容器實(shí)現(xiàn)的，所以只 需要改變 scrollLeft 或者 scrollTop 即可
dragbox.scrollLeft = 999; dragbox.scrollTop = 999;
除此之外，也可以采用純 HTML 方式實(shí)現(xiàn)， 利用元素的 autofocus 自動(dòng)聚焦到可視范圍的特性
<div class=“dragcon"> ... <button class="pos" autofocus></button> <!--添加一個(gè)自動(dòng)聚焦的元素--> </div>
比如你希望初始位置在 左上角 ，那么添加一個(gè) 右下角 的自動(dòng)聚焦元素就可以了（當(dāng)然還需要設(shè)置透明度等隱藏起來）~
1. 設(shè)置邊界
現(xiàn)在拖拽目標(biāo)的邊界是屏幕邊緣，有時(shí)候可能需要留一些間距，這種需要在 CSS 就很容易了，可以改變 left/top/right/bottom 、 padding 、 border ... 很多方式
.dragbox{
left: 10px;
top: 10px;
right: 10px;
bottom: 10px;
/*rect: 10px;*/
}
.dragbox{
padding: 10px;
}
六、說明和小結(jié)
關(guān)于兼容性本來以為是沒什么問題的，實(shí)測(cè)下來 ios 問題多多，主要是 safari 滾動(dòng)容器的問題。例如，有些低版本 ios 滾動(dòng)不順暢，需要添加
-webkit-overflow-scrolling:touc h ， 才能實(shí)現(xiàn)平滑滾動(dòng)和自動(dòng)吸附，但是又會(huì)導(dǎo)致層級(jí)問題，有些文檔上描述設(shè)置該屬性會(huì)創(chuàng)建一個(gè)原生的滾動(dòng)容器，層級(jí)最高。還有第一種 fixed 布局，如果默認(rèn)情況下設(shè)置 pointer-events: none ， 在 touchstart 之后設(shè)置成 auto ，這個(gè)在 ios 上滾動(dòng)竟然失效了，但是反轉(zhuǎn)過來就可以了（demo中已兼容ios）。
優(yōu)點(diǎn)嘛，繼承 CSS 的靈活性，幾乎零成本，容易復(fù)用，同時(shí)利用了原生滾動(dòng)，也不會(huì)有卡頓。
不過也有少許局限，如果 拖拽目標(biāo)的尺寸是不固定的 ，可能需要借助 JS 來獲取了。當(dāng)然相比較而言，這還是一個(gè)性價(jià)比極高的實(shí)現(xiàn)方式。
現(xiàn)在回頭看看，其實(shí)也沒有用到什么非常生僻的屬性（scroll-snap 可能算一個(gè)，不過畢竟是輔助功能），主要還是常見的效果，然后通過聯(lián)想和發(fā)散，根據(jù)平日的積累，充分挖掘原生的能力，最終完成所需要的交互，然后就有了本文。
感謝閱讀，希望能對(duì)日后的工作有所啟發(fā)。
References
[1] 起點(diǎn)中文網(wǎng): https://m.qidian.com/
[2] CSS Scroll Snap: https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Scroll_Snap
到此這篇關(guān)于純 CSS 實(shí)現(xiàn)拖拽效果的代碼的文章就介紹到這了,更多相關(guān)CSS 實(shí)現(xiàn)拖拽效果內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
CSS 使用 resize 實(shí)現(xiàn)圖片拖拽切換預(yù)覽功能(強(qiáng)大功能)
這篇文章主要介紹了CSS 使用 resize 實(shí)現(xiàn)圖片拖拽切換預(yù)覽功能(強(qiáng)大功能),本文通過圖文實(shí)例相結(jié)合給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要2021-08-18
這篇文章主要介紹了純CSS實(shí)現(xiàn)左右拖拽改變布局大小,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)2020-06-12
CSS 鼠標(biāo)點(diǎn)擊拖拽效果的實(shí)現(xiàn)代碼
這篇文章主要介紹了CSS 鼠標(biāo)點(diǎn)擊拖拽效果,我們還是僅僅通過 CSS，來實(shí)現(xiàn)一種絲滑的鼠標(biāo)點(diǎn)擊拖動(dòng)元素移動(dòng)的效果，本文通過實(shí)例代碼效果展示給大家介紹的非常詳細(xì)，對(duì)大家的2022-10-10
