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>
- 关于WCF的一个非常“无语”的BUG!
- 谈谈分布式事务之一:SOA需要怎样的事务控制方式
- [WCF权限控制]WCF的三种授权模式
- [WCF安全系列]消息的保护等级[下篇]
- [WCF安全系列]通过绑定元素看各种绑定对消息保护的实现
- 通过添加HTTP Header实现上下文数据在WCF的自动传递
- 模拟在WCF中的应用
- [WCF权限控制]通过扩展自行实现服务授权[提供源码下载]
- [WCF权限控制]WCF自定义授权体系详解[原理篇]
- [WCF权限控制]WCF自定义授权体系详解[原理篇]
- [WCF权限控制]WCF自定义授权体系详解[实例篇]
- [ASP.NET MVC]通过对HtmlHelper扩展简化“列表控件”的绑定
- [ASP.NET MVC]为HtmlHelper添加一个RadioButtonList扩展方法
- 在ASP.NET MVC中使用“RadioButtonList”和“CheckBoxList”
- 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 数组属性和方法
- 一句话实现php日期转中文汉字
- .Net Core微服务入门全纪录(八)——Docker Compose与容器网络
- PHP中少用但是很好用的方法
- 使用一维数据构造简单卷积神经网络
- .Net Core微服务入门全纪录(完结)——Ocelot与Swagger
- PHP使用GD库生成文件
- 反向传播算法从原理到实现
- 基于EntityFramework 6 Code First实现多租户的一种思路
- PHP使用GD库生成柱状图
- PHP生成Mysql数据字典
- .Net Core in Docker极简入门(上篇)
- PHP一个比较完善的树形结构代码
- .Net Core in Docker极简入门(下篇)
- snoopy(强大的PHP采集类) 详细介绍
- 十分钟搭建自己的私有NuGet服务器-BaGet