vue实现拖拽效果

作者：webopenfather 时间：2024-05-02 16:59:58　

vue中实现拖拽效果，供大家参考，具体内容如下

首先要搞明白分清clientY pageY screenY layerY offsetY的区别

作用3（事件对象中记录的鼠标位置）

语法解释

evt.screenX 相对于屏幕的左上角为原点
evt.screenY

evt.clientX 相对于浏览器的客户端左上角为原点（不计算滚动条位置）
evt.clientY

evt.pageX 相对于浏览器的客户端左上角为原点（计算滚动条的位置）
evt.pageY

evt.offsetX 以自己的左上角为原点
evt.offsetY

evt.pageY/evt.pageX 相当于文档的左上角为原点，即包括被被隐藏的距离；

evt.clientY/evt.clientX 相当于浏览器可视窗口的左上角为原点，即不包括被被隐藏的距离；

实现拖拽功能

<style>
#app{
position: relative; /*定位*/
top: 10px;
left: 10px;
width: 200px;
height: 200px;
background: #666; /*设置一下背景*/
}
</style>
<body>
<div id="app" @mousedown="move"> 
{{positionX}}
{{positionY}}
</div>
</body>
//main.js
let app = new Vue({
el:'#app',
data:{
positionX:0,
positionY:0,
},
methods:{
move(e){
let odiv = e.target; //获取目标元素

//算出鼠标相对元素的位置
let disX = e.clientX - odiv.offsetLeft;
let disY = e.clientY - odiv.offsetTop;
document.onmousemove = (e)=>{ //鼠标按下并移动的事件
//用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
let left = e.clientX - disX;
let top = e.clientY - disY;

//绑定元素位置到positionX和positionY上面
this.positionX = top;
this.positionY = left;

//移动当前元素
odiv.style.left = left + 'px';
odiv.style.top = top + 'px';
};
document.onmouseup = (e) => {
document.onmousemove = null;
document.onmouseup = null;
};
}

},
computed:{},
});

当然，我们可以将它绑定为一个自定义指令，这样的话就可以用调用指令的形式来实现拖拽效果，下面是定义自定义指令的代码

在main.js中定义全局指令

Vue.directive('drag'
drag: {
// 指令的定义
bind(el) {
let odiv = el; //获取当前元素
oDiv.onmousedown = (e) => {
//算出鼠标相对元素的位置
let disX = e.clientX - odiv.offsetLeft;
let disY = e.clientY - odiv.offsetTop;

document.onmousemove = (e)=>{
//用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
let left = e.clientX - disX;
let top = e.clientY - disY;

if(left<3) {
left=0;
odiv.style.width="2px";
}else{odiv.style.width="auto";}
if(left>innerWidth-odiv.offsetWidth) {left=innerWidth- odiv.offsetWidth;odiv.style.width="2px";}

//移动当前元素
odiv.style.left = left + 'px';
odiv.style.top = top + 'px';
};
document.onmouseup = (e) => {
document.onmousemove = null;
document.onmouseup = null;
};
}
}
});

来源：https://blog.csdn.net/qq_42714690/article/details/103654227

标签：vue,拖拽

投稿

vue实现拖拽效果

猜你喜欢

SQLServer 日期函数大全(小结)

Yahoo!上的小秘密

Python写一个简单的在线编辑器

virtualenv 指定 python 解释器的版本方法

查找MySQL线程中死锁的ID的方法

sqlserver连接错误之SQL评估期已过的问题解决

合理利用页面标签元素有利用搜索引擎收录

Mysql建库字符集和排序规则及说明

Python xml、字典、json、类四种数据类型如何实现互相转换

pyautogui自动化控制鼠标和键盘操作的步骤

Python callable内置函数原理解析

tensorflow识别自己手写数字

php面象对象数据库操作类实例

解析MySQL8.0新特性——事务性数据字典与原子DDL

php自动注册登录验证机制实现代码

Django中Migrate和Makemigrations实操详解

Python reversed反转序列并生成可迭代对象

oracle下一条SQL语句的优化过程(比较详细)

SQL SERVER 2012新增函数之逻辑函数IIF

Python中关于set的基本用法