公司要求做一個(gè)類似于企業(yè)微信的日程功能
然后呢 日程組件 需要能拖拽時(shí)間段創(chuàng)建
這里 我們使用 dragstart+dragend+dragover 記錄被拖動(dòng)位置完成的
如果沒(méi)接觸過(guò) 可以查看我的文章
vue記錄鼠標(biāo)拖拽劃過(guò)位置并將劃過(guò)位置變色
這里的話 其實(shí)可以在@dragover中做操作
界面上
@dragover=“mouseup”
mouseup函數(shù)里面加上
mouseup(event) {
event.preventDefault();
//這中間寫(xiě)你的業(yè)務(wù)邏輯
const pageHeight = document.documentElement.scrollHeight;
const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
const clientHeight = document.documentElement.clientHeight || window.innerHeight;
if (scrollTop + clientHeight >= pageHeight) {
window.scrollTo(0, pageHeight);
}
}
這樣 你慢慢去拖拽是可以完成 但老實(shí)說(shuō) 有問(wèn)題 因?yàn)閐ragover監(jiān)聽(tīng)的觸發(fā)是有時(shí)間間隔的
如果正好在間隔時(shí)間內(nèi) 你拖拽到底 就觸發(fā)不到了
其實(shí)我們可以換一種思路
先用一個(gè)變量判斷當(dāng)前是不是在拖拽
然后監(jiān)聽(tīng)鼠標(biāo)被移動(dòng)到底
然后開(kāi)啟滾動(dòng)
我們?cè)?br> data中定義一個(gè)dragging 默認(rèn)值為 false
data() {
return {
dragging: false
};
},
用它來(lái)記錄是不是在被拖拽 很簡(jiǎn)單
在@dragstart 開(kāi)啟拖拽 事件中賦值為 true
然后在 @dragend 鼠標(biāo)放開(kāi)時(shí)觸發(fā)事件 設(shè)為false
然后在mounted函數(shù)中這樣寫(xiě)文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-471559.html
mounted() {
window.addEventListener('scroll', function() {
const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
const clientHeight = document.documentElement.clientHeight || window.innerHeight;
const pageHeight = document.documentElement.scrollHeight;
if ((scrollTop + clientHeight >= pageHeight)&&this.dragging) {
window.scrollTo(0, pageHeight);
}
});
},
監(jiān)聽(tīng)鼠標(biāo)移動(dòng) 判斷 當(dāng)移動(dòng)到底 且dragging為條件真 即true 時(shí)向下滾動(dòng)
這樣就解決了
dragover的時(shí)間間隔問(wèn)題文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-471559.html
到了這里，關(guān)于vue 實(shí)現(xiàn) dragover拖拽到頁(yè)面底部時(shí)元素自動(dòng)向下滾動(dòng)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![uniapp - [ H5 網(wǎng)頁(yè) / App ] 高性能 tabbar 底部菜單凸起效果，原生系統(tǒng)自定義底部菜單不卡頓、切換頁(yè)面不閃爍、自動(dòng)緩存頁(yè)面（底部菜單中間自定義一個(gè)圖片并懸浮起來(lái)）](https://imgs.yssmx.com/Uploads/2024/02/831617-1.gif)
