vue 鼠标拖拽
<template>
<div class="home">
<div id="box" v-drag></div>
</div>
</template>
<script>
// @ is an alias to /src
export default {
name: "Home",
data() {return {}},
directives: {
drag: {
// 指令的定义
inserted: function(el) {
// el.drag();
console.log(el);
//获取元素
// var dv = document.getElementById("dv");
let x = 0;
let y = 0;
let l = 0;
let t = 0;
let isDown = false;
//鼠标按下事件
el.onmousedown = function(e) {
//获取x坐标和y坐标
x = e.clientX;
y = e.clientY;
//获取左部和顶部的偏移量
l = el.offsetLeft;
t = el.offsetTop;
//开关打开
isDown = true;
//设置样式
el.style.cursor = "move";
};
//鼠标移动
window.onmousemove = function(e) {
if (isDown == false) {
return;
}
//获取x和y
let nx = e.clientX;
let ny = e.clientY;
//计算移动后的左偏移量和顶部的偏移量
let nl = nx - (x - l);
let nt = ny - (y - t);
el.style.left = nl + "px";
el.style.top = nt + "px";
};
//鼠标抬起事件
el.onmouseup = function() {
//开关关闭
isDown = false;
el.style.cursor = "default";
};
}
}
}
};
</script>
<style lang="scss" scoped>
#box {
width: 60px;
height: 60px;
background-color: darkorange;
border-radius: 50%;
position: absolute;
//脱离文档流
}
</style>
————————————————
版权声明:本文为CSDN博主「魏同学.」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_47627529/article/details/106895565
最新文章
- mysql 时间戳 按周、日、月 统计方法 附 date格式
- stm32f系列单片机startup_stm32fxxx.s文件说明(转)
- HDU 1677
- MVC小系列(十二)【RenderAction和RenderPartial区别】
- SQL - 删掉数据库
- [HeadFirst-JSPServlet学习笔记][第三章:实战MVC]
- linux 下访问mysql
- Android使用Eclipse遇到";java.lang.ClassNotFoundException";
- window.open a.href打开窗口referer的问题
- node基础篇一:node介绍、node http、node event 课堂(持续)
- vue项目架构
- hibernate框架学习笔记9:多对多关系案例
- DELL EqualLogic PS存储硬盘故障数据恢复成功案例分享
- android开发过程中遇到的坑
- Vue一、起步
- ⌈洛谷1312⌋⌈NOIP提高组2011⌋Mayan游戏【搜索】
- JS常用类
- ReactNative用指定的设备/模拟器运行项目
- 手动搭建ABP2.1.3——基础框架
- Linux下编译与调试
热门文章
- SpringBoot运行就停止
- 通过java代码向mysql数据库插入记录,中文乱码处理
- ggplot2绘制饼图
- 关于sqlsugar二级缓存
- Git探究
- Lubuntu 18.04 自动登录
- oracle数据库安装出现的问题
- 51电子-STC89C51开发板:程序烧录(刷写) 到 IC 设置
- Camstar报错:cannot be accessed through null object reference at CDO &#39;xxx&#39;
- Linux内核机制—smp_hotplug_thread