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>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-08-31 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读