Vue实现pc/H5弹窗拖拽
时间:2022-07-24
本文章向大家介绍Vue实现pc/H5弹窗拖拽,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
PC
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>pc拖拽</title>
<style>
.move {
position: absolute;
width: 100px;
height: 100px;
background-color: steelblue;
border-radius: 50%;
cursor: move;
}
</style>
</head>
<body>
<div id="vue">
<div class="move" @mousedown="mousedown" @mouseup="mouseup"></div>
</div>
</body>
<script src="https://cdn.suoluomei.com/common/js2.0/vue/v2.5.16/vue.js"></script>
<script>
new Vue({
el: '#vue',
data: {},
methods: {
mousedown(e) {
var target = e.target
var x = e.clientX
var y = e.clientY
var left = x - target.offsetLeft
var top = y - target.offsetTop
document.onmousemove = (e) => {
var nx = e.clientX - left
var ny = e.clientY - top
target.style.left = nx + 'px'
target.style.top = ny + 'px'
}
},
mouseup(e) {
document.onmousemove = null
}
}
})
</script>
</html>
H5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.suoluomei.com/common/js2.0/npm/vant@2.2/lib/index.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>H5拖拽</title>
<style>
.move {
position: absolute;
width: 100px;
height: 100px;
background-color: slategray;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="Vue">
<div class="move" :style="{top:top + 'px',left:left + 'px'}" @touchstart="touchstart"
@touchmove.prevent="touchmove" @touchend="touchend"></div>
</div>
</body>
<script src="https://cdn.suoluomei.com/common/js2.0/vue/v2.5.16/vue.js"></script>
<script>
new Vue({
el: "#Vue",
data: {
x: 0,
y: 0,
l: 0,
t: 0,
left: "",
top: "",
isDown: false
},
methods: {
touchstart(e) {
this.x = e.changedTouches[0].pageX
this.y = e.changedTouches[0].pageY
this.l = this.left
this.t = this.top
this.isDown = true
},
touchmove(e) {
if (this.isDown) {
var nx = e.changedTouches[0].pageX
var ny = e.changedTouches[0].pageY
var nl = nx - (this.x - this.l)
var nt = ny - (this.y - this.t)
this.left = nl
this.top = nt
}
},
touchend(e) {
this.isDown = false
}
}
})
</script>
</html>
- Java工具类- 跨域工具类
- python语言中的AOP利器:装饰器
- 如何使用supervisor管理你的应用
- Manjaro安装配置
- [Golang软件推荐] Frp内网穿透
- [Golang软件推荐] Golang通用连接池
- RxJS -- Subscription
- ASP.Net Core项目在Mac上使用Entity Framework Core 2.0进行迁移可能会遇到的一个问题.
- RxJS速成 (下)
- RxJS速成 (上)
- Typescript 查缺补漏
- Git -- Stash
- Git -- Rebase
- Git -- 分支与合并 (命令行+可视化工具p4merge) Fast Forward 合并禁用 Fast Forward 合并自动合并解决合并的冲突
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 第05期:使用 prometheus 监控 clickhouse 集群
- 这 6 点知识让我对 JavaScript 的对象有了更进一步的了解
- Linux进程间通信(中)之信号、信号量实践
- Linux进程间通信(下)之共享内存实践
- 手把手教你快速使用Vmware虚拟机安装Linux操作系统实验环境
- 天啊!鹅厂都开始做开发板了?网红腾讯物联网开发板终极开箱评测,让我们一睹为快!
- 我用 React 和 Vue 构建了同款应用,来看看哪里不一样(2020 版)
- 大点干!早点散----------深入剖析Redis集群原理与实验
- 微信群总是有人发广告?看我用Python写一个自动化机器人消灭他!
- 苏宁基于 ClickHouse 的大数据全链路监控实践
- CORS Cross Origin Resource Sharing
- 从0开始做播放器-第二季-第2章-Android NDK 工程的建立和 JNI 的基本用法
- 记一次线上问题排查-maven父子结构依赖所遇到的坑
- 『技术随手学』解决 pip conda install 网络故障中断
- boost asio