公司要求做一个类似于企业微信的日程功能
然后呢 日程组件 需要能拖拽时间段创建
这里 我们使用 dragstart+dragend+dragover 记录被拖动位置完成的
如果没接触过 可以查看我的文章
vue记录鼠标拖拽划过位置并将划过位置变色
这里的话 其实可以在@dragover中做操作
界面上
@dragover=“mouseup”
mouseup函数里面加上
mouseup(event) {
event.preventDefault();
//这中间写你的业务逻辑
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);
}
}
这样 你慢慢去拖拽是可以完成 但老实说 有问题 因为dragover监听的触发是有时间间隔的
如果正好在间隔时间内 你拖拽到底 就触发不到了
其实我们可以换一种思路
先用一个变量判断当前是不是在拖拽
然后监听鼠标被移动到底
然后开启滚动
我们在
data中定义一个dragging 默认值为 false
data() {
return {
dragging: false
};
},
用它来记录是不是在被拖拽 很简单
在@dragstart 开启拖拽 事件中赋值为 true
然后在 @dragend 鼠标放开时触发事件 设为false
然后在mounted函数中这样写文章来源:https://www.toymoban.com/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);
}
});
},
监听鼠标移动 判断 当移动到底 且dragging为条件真 即true 时向下滚动
这样就解决了
dragover的时间间隔问题文章来源地址https://www.toymoban.com/news/detail-471559.html
到了这里,关于vue 实现 dragover拖拽到页面底部时元素自动向下滚动的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!