vue实现拖拽的简单案例 不超出可视区域
更新时间：2019年07月25日 16:10:18 作者：一个耕耘在后端的前端
这篇文章主要为大家详细介绍了vue实现拖拽的简单案例，不超出可视区域，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue实现拖拽x效果的具体代码，供大家参考，具体内容如下
实现拖拽之前，先了解几个小常识：
这两种获取鼠标坐标的方法，区别在于基于的对象不同：
- pageX和pageY获取的是鼠标指针距离文档（HTML）的左上角距离，不会随着滚动条滚动而改变；
- clientX和clientY获取的是鼠标指针距离可视窗口(不包括上面的地址栏和滑动条)的距离，会随着滚动条滚动而改变；
1.clientX : 是用来获取鼠标点击的位置距离 当前窗口 左边的距离
2.clientY: 是用来获取鼠标点击的位置距离 当前窗口 上边的距离
3.offsetWidth: 用来获取当前拖拽元素 自身的宽度
4.offsetHeight:用来获取当前拖拽元素 自身的高度
5.document.documentElement.clientHeight ：屏幕的可视高度
6.document.documentElement.clientWidth：屏幕的可视高度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue实现拖拽</title>
<script src="./js/vue.min.js"></script>
</head>
<style>
*{margin: 0;padding:0;}
#app{
position: relative; /*定位*/
top: 10px;
left: 10px;
width: 80px;
height: 80px;
background: #666; /*设置一下背景*/
}
</style>
<body>
<div id="app" @mousedown="move">
{{positionX}}
{{positionY}}
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
positionX: 0,
positionY: 0
},
methods: {
move(e){
let odiv = e.target;// 获取目标元素
//计算出鼠标相对点击元素的位置,e.clientX获取的是鼠标的位置，OffsetLeft是元素相对于外层元素的位置
let x = e.clientX - odiv.offsetLeft;
let y = e.clientY - odiv.offsetTop;
console.log(odiv.offsetLeft,odiv.offsetTop)
document.onmousemove = (e) => {
// 获取拖拽元素的位置
let left = e.clientX - x;
let top = e.clientY - y;
this.positionX = left;
this.positionY = top;
//console.log(document.documentElement.clientHeight,odiv.offsetHeight)
// 把拖拽元素 放到 当前的位置
if (left <= 0) {
left = 0;
} else if (left >= document.documentElement.clientWidth - odiv.offsetWidth){
//document.documentElement.clientWidth 屏幕的可视宽度
left = document.documentElement.clientWidth - odiv.offsetWidth;
}
if (top <= 0) {
top = 0;
} else if (top >= document.documentElement.clientHeight - odiv.offsetHeight){
// document.documentElement.clientHeight 屏幕的可视高度
top = document.documentElement.clientHeight - odiv.offsetHeight
}
odiv.style.left = left + "px";
odiv.style.top = top + "px"
}
// 为了防止 火狐浏览器 拖拽阴影问题
document.onmouseup = (e) => {
document.onmousemove = null;
document.onmouseup = null
}
}
}
})
</script>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
例如组件使用频率非常高,几乎每个页面都在使用便可以封装成全局组件,下面通过本文给大家介绍Vue3注册全局组件的相关知识,感兴趣的朋友一起看看吧2024-01-01
这篇文章主要介绍了vue elementui简易侧拉栏的使用,增加了侧拉栏,目的是可以选择多条数据展示数据,本文通过示例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-06-06
这篇文章主要介绍了8个非常实用的Vue自定义指令，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下2020-12-12
这篇文章主要介绍了Vant Weapp组件踩坑:picker的初始赋值解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能
本文通过实例代码给大家介绍了Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能,需要的朋友可以参考下2018-08-08
vue-music 使用better-scroll遇到轮播图不能自动轮播问题
根据vue-music视频中slider组建的使用，当安装新版本的better-scroll，轮播组件，不能正常轮播。如何解决这个问题呢，下面小编给大家带来了vue-music 使用better-scroll遇到轮播图不能自动轮播问题，感兴趣的朋友一起看看吧2018-12-12
这篇文章主要为大家详细介绍了vue如何使用video.js实现播放m3u8格式的视频,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2023-12-12
这篇文章主要介绍了vue 实现click同时传入事件对象和自定义参数，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2021-01-01
这篇文章主要为大家详细介绍了如何使用Vue实现简易的车牌输入键盘效果,文中的示例代码讲解详细,具有一定的学习价值,感兴趣的小伙伴可以了解下2023-11-11
这篇文章主要介绍了vue事件处理原理及过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2023-03-03
最新评论