日韩午夜av电影,成a人片国产精品,欧美亚洲国产视频小说

主頁(yè) > 知識(shí)庫(kù) > 純 CSS 實(shí)現(xiàn)拖拽效果的代碼

純 CSS 實(shí)現(xiàn)拖拽效果的代碼

一、拖拽效果示例

這是移動(dòng)端很常見(jiàn)的一個(gè)效果，可以按住拖來(lái)拖去，比如下面的起點(diǎn)中文網(wǎng) [1] 觸屏版：

這類效果用JS可以很容易實(shí)現(xiàn)，無(wú)非就是多了一些計(jì)算，多考慮了一些臨界場(chǎng)景，然后代碼量也多了一些。不過(guò)，經(jīng)過(guò)我的一番腦洞，發(fā)現(xiàn)CSS也能幾乎實(shí)現(xiàn)這一效果，接著往下看。

二、CSS實(shí)現(xiàn)原理

在傳統(tǒng) web 中，頁(yè)面滾動(dòng)是一個(gè)很常見(jiàn)交互，操作上就是 利用鼠標(biāo)滾輪或者直接拖動(dòng)滾動(dòng)條 。但是，移動(dòng)端可不一樣， 直接用手指拖動(dòng)頁(yè)面就可以滾動(dòng)了。 通常頁(yè)面是要么垂直方向滾動(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)

接下來(lái)，把后面的文本隱藏起來(lái)

是不是有點(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)布局

接下來(lái)需要把這個(gè)特性加入到頁(yè)面當(dāng)中，這里列舉了兩種布局

1. fixed 定位

現(xiàn)在直接把剛才的布局添加到頁(yè)面上，并添加 fixed 定位

<body>
  ...頁(yè)面上的其他元素
  <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)系如下

這樣一來(lái)， dragbox 肯定把頁(yè)面原有的部分遮擋了，所以還需要添加 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í)際效果如下

完整代碼可訪問(wèn)https://codepen.io/xboxyan/pen/PobwxBK（PC訪問(wèn)請(qǐng)打開(kāi)移動(dòng)端模式）

也可直接掃描以下二維碼

1. absolute 定位 + 層級(jí)

前面一種布局由于 fixed 定位層級(jí)的影響，不得不借助 JS 來(lái)動(dòng)態(tài)改變?nèi)萜鞯臓顟B(tài)，有沒(méi)有什么辦法可以實(shí)現(xiàn) 既可以拖拽，又不影響原有頁(yè)面 呢？下面來(lái)看這一種布局，用到了 ab s olute 定位

這里需要對(duì)原有頁(yè)面包裹一層 div 容器，如下

<body>
  <div class=“dragbox”>
    <div class=“dragcon”></div>
    <div class=“ball”></div>
  </div>
  <div class=“body”> <!--單獨(dú)用一層實(shí)現(xiàn)頁(yè)面滾動(dòng)-->
    ...頁(yè)面上的其他元素
  </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)系就變成了這樣

這里原先頁(yè)面內(nèi)容在層級(jí)上處于 dragbox 和 拖拽目標(biāo) 之間，所以在拖拽時(shí)也不會(huì)影響到原有頁(yè)面的滾動(dòng)， 無(wú)需任何 JS 處理

完整代碼可訪問(wèn)https://codepen.io/xboxyan/pen/bGBNQxL（PC訪問(wèn)請(qǐng)打開(kāi)移動(dòng)端模式）

也可直接掃描以下二維碼

提示：上面兩種布局方式，第一種方式適應(yīng)性更好，不影響現(xiàn)有項(xiàng)目；第二種體驗(yàn)更好，但是會(huì)使用 div 作為頁(yè)面滾動(dòng)容器，會(huì)對(duì)頁(yè)面結(jié)構(gòu)做一定的改動(dòng)，可以根據(jù)實(shí)際情況自行選擇。

五、CSS實(shí)現(xiàn)其他功能

1. 吸附功能

很多時(shí)候，在拖拽結(jié)束時(shí)需要讓它自動(dòng)吸附在邊緣，就如同文章開(kāi)頭的示意圖一樣。那么，通過(guò)吸附，可以聯(lián)想到什么屬性呢？

答案就是 CSS Scroll Snap [2]

<body>
  ...頁(yè)面上的其他元素
  <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í)際效果如下

完整代碼可訪問(wèn)https://codepen.io/xboxyan/pen/XWNJyPw（PC訪問(wèn)請(qǐng)打開(kāi)移動(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è)置透明度等隱藏起來(lái)）~

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;
}

六、說(shuō)明和小結(jié)

關(guān)于兼容性本來(lái)以為是沒(méi)什么問(wèn)題的，實(shí)測(cè)下來(lái) ios 問(wèn)題多多，主要是 safari 滾動(dòng)容器的問(wèn)題。例如，有些低版本 ios 滾動(dòng)不順暢，需要添加

-webkit-overflow-scrolling:touc h ，才能實(shí)現(xiàn)平滑滾動(dòng)和自動(dòng)吸附，但是又會(huì)導(dǎo)致層級(jí)問(wèn)題，有些文檔上描述設(shè)置該屬性會(huì)創(chuàng)建一個(gè)原生的滾動(dòng)容器，層級(jí)最高。還有第一種 fixed 布局，如果默認(rèn)情況下設(shè)置 pointer-events: none ，在 touchstart 之后設(shè)置成 auto ，這個(gè)在 ios 上滾動(dòng)竟然失效了，但是反轉(zhuǎn)過(guò)來(lái)就可以了（demo中已兼容ios）。

優(yōu)點(diǎn)嘛，繼承 CSS 的靈活性，幾乎零成本，容易復(fù)用，同時(shí)利用了原生滾動(dòng)，也不會(huì)有卡頓。

不過(guò)也有少許局限，如果 拖拽目標(biāo)的尺寸是不固定的 ，可能需要借助 JS 來(lái)獲取了。當(dāng)然相比較而言，這還是一個(gè)性價(jià)比極高的實(shí)現(xiàn)方式。

現(xiàn)在回頭看看，其實(shí)也沒(méi)有用到什么非常生僻的屬性（scroll-snap 可能算一個(gè)，不過(guò)畢竟是輔助功能），主要還是常見(jiàn)的效果，然后通過(guò)聯(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)文章，希望大家以后多多支持腳本之家！

標(biāo)簽：綏化湖北焦作湘西無(wú)錫銅陵試駕邀約欽州

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《純 CSS 實(shí)現(xiàn)拖拽效果的代碼》，本文關(guān)鍵詞純,CSS,實(shí)現(xiàn),拖拽,效果,的,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無(wú)關(guān)。