本文实例为大家分享了vue实现拖拽x效果的具体代码，供大家参考，具体内容如下
实现拖拽之前，先了解几个小常识：
这两种获取鼠标坐标的方法，区别在于基于的对象不同：
pageX和pageY获取的是鼠标指针距离文档（HTML）的左上角距离，不会随着滚动条滚动而改变；
clientX和clientY获取的是鼠标指针距离可视窗口(不包括上面的地址栏和滑动条)的距离，会随着滚动条滚动而改变；
1.clientX : 是用来获取鼠标点击的位置距离 当前窗口 左边的距离
2.clientY: 是用来获取鼠标点击的位置距离 当前窗口 上边的距离
3.offsetWidth: 用来获取当前拖拽元素 自身
在Vue.js中实现拖拽功能是一项常见的需求，特别是在构建交互式用户界面时。在这个简单的案例中，我们将探讨如何创建一个可以自由拖动且不会超出可视区域的元素。我们需要理解几个基本概念：
1. 鼠标坐标：`pageX` 和 `pageY` 返回鼠标相对于整个HTML文档左上角的坐标，不受滚动条影响。而 `clientX` 和 `clientY` 返回鼠标相对于浏览器视口（不包含滚动条和地址栏）的坐标，会随滚动条变化。
2. 元素属性：`offsetWidth` 和 `offsetHeight` 分别用于获取元素自身的宽度和高度，这在计算元素拖动时的位置至关重要。
3. 可视区域尺寸：`document.documentElement.clientHeight` 和 `document.documentElement.clientWidth` 分别表示浏览器的可视高度和宽度，用于确保元素不会超出屏幕边界。
下面是一个基于Vue.js的简单拖拽实现：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue实现拖拽</title>
<style>
*{margin: 0;padding:0;}
#app{
position: relative; /*定位*/
top: 10px;
left: 10px;
width: 80px;
height: 80px;
background: #666; /*设置一下背景*/
}
</style>
</head>
<body>
<div id="app" @mousedown="move">{{positionX}}{{positionY}}</div>
<script src="./js/vue.min.js"></script>
<script>
var vm = new Vue({
el: "#app",
data: {
positionX: 0,
positionY: 0
},
methods: {
move(e){
let odiv = e.target; // 获取目标元素
// 计算鼠标相对点击元素的位置
let x = e.clientX - odiv.offsetLeft;
let y = e.clientY - odiv.offsetTop;
document.onmousemove = (e) => {
// 获取拖拽元素的位置
let left = e.clientX - x;
let top = e.clientY - y;
this.positionX = left;
this.positionY = top;
// 确保元素不超出可视区域
if (left <= 0) {
left = 0;
} else if (left >= document.documentElement.clientWidth - odiv.offsetWidth) {
left = document.documentElement.clientWidth - odiv.offsetWidth;
}
if (top <= 0) {
top = 0;
} else if (top >= document.documentElement.clientHeight - odiv.offsetHeight) {
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>
</body>
</html>
```
在这个示例中，我们创建了一个Vue实例，挂载在ID为`app`的`div`元素上。当用户按下鼠标并移动时，`move`方法会被调用。这个方法首先获取目标元素（即被拖动的元素），然后计算鼠标相对于元素的偏移量。
在`onmousemove`事件处理函数中，我们持续更新元素的`left`和`top`样式属性，使元素跟随鼠标移动。同时，我们检查元素的位置，确保它不会超出浏览器的可视区域。如果元素左侧或顶部位置小于0，我们将它们设置为0，以保持在屏幕内。如果元素超出右侧或底部，我们将其限制在可视区域边缘。
为了避免在火狐浏览器中出现拖拽阴影，我们在`onmouseup`事件中清理`onmousemove`和`onmouseup`监听器。
这个简单的Vue拖拽案例展示了如何结合JavaScript事件处理和Vue的数据绑定来实现交互式功能。通过扩展这个基础，你可以添加更复杂的功能，比如限制拖动方向、添加动画效果，或者将此功能封装成可复用的Vue组件。
