vue 实现 dragover拖拽到页面底部时元素自动向下滚动

这篇具有很好参考价值的文章主要介绍了vue 实现 dragover拖拽到页面底部时元素自动向下滚动。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

公司要求做一个类似于企业微信的日程功能
vue 实现 dragover拖拽到页面底部时元素自动向下滚动
然后呢 日程组件 需要能拖拽时间段创建
vue 实现 dragover拖拽到页面底部时元素自动向下滚动
这里 我们使用 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函数中这样写

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模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包