原生+jq
<!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>Document</title>
<style>
#dv {
width: 100px;
height: 100px;
background-color: blue;
border-radius: 50%;
position: absolute;
}
</style>
</head>
<body>
<div id="dv"></div>
</body>
<script src="https://cdn.suoluomei.com/common/js/jquery-2.1.4.min.js"></script>
<script>
//获取元素
var dv = document.getElementById('dv');
var x = 0;
var y = 0;
var l = 0;
var t = 0;
var isDown = false;
// PC 端事件
// //鼠标按下事件
// dv.onmousedown = function (e) {
// //获取x坐标和y坐标
// x = e.clientX;
// y = e.clientY;
// //获取左部和顶部的偏移量
// l = dv.offsetLeft;
// t = dv.offsetTop;
// //开关打开
// isDown = true;
// //设置样式
// dv.style.cursor = 'move';
// }
// //鼠标移动
// window.onmousemove = function (e) {
// if (isDown == false) {
// return;
// }
// //获取x和y
// var nx = e.clientX;
// var ny = e.clientY;
// //计算移动后的左偏移量和顶部的偏移量
// var nl = nx - (x - l);
// var nt = ny - (y - t);
// dv.style.left = nl + 'px';
// dv.style.top = nt + 'px';
// }
// //鼠标抬起事件
// dv.onmouseup = function () {
// //开关关闭
// isDown = false;
// dv.style.cursor = 'default';
// }
移动 端事件
$(document).bind("touchstart", function (e) {
console.log(e)
x = e.originalEvent.targetTouches[0].pageX
y = e.originalEvent.targetTouches[0].pageY
//获取左部和顶部的偏移量
l = dv.offsetLeft;
t = dv.offsetTop;
//开关打开
isDown = true;
//设置样式
dv.style.cursor = 'move';
});
$(document).bind("touchmove", function (e) {
if (isDown == false) {
return;
}
//获取x和y
var nx = e.originalEvent.targetTouches[0].pageX;
var ny = e.originalEvent.targetTouches[0].pageY;
//计算移动后的左偏移量和顶部的偏移量
var nl = nx - (x - l);
var nt = ny - (y - t);
dv.style.left = nl + 'px';
dv.style.top = nt + 'px';
});
$(document).bind("touchend", function (e) {
//开关关闭
isDown = false;
dv.style.cursor = 'default';
});
</script>
</html>
vue写法
<!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>标题</title>
<style>
* {
padding: 0;
margin: 0;
}
[v-cloak] {
display: none !important;
}
.cont {
width: 23.4375rem;
height: 37.5rem;
background: red;
position: relative;
overflow: hidden;
}
#dv {
width: 6.25rem;
height: 6.25rem;
background-color: blue;
border-radius: 50%;
position: absolute;
}
.move {
cursor: move
}
.default {
cursor: default;
}
</style>
</head>
<body>
<div v-cloak id="Vue">
<div class="cont">
<div id="dv" v-bind:class="{ move : isActive, default : isActive2}" v-bind:style="{top:top + 'px',left:left + 'px'}"
@touchstart="touchstart" @touchmove.prevent="touchmove" @touchend="touchend"></div>
</div>
</div>
</body>
<script src="https://cdn.suoluomei.com/common/js/jquery-2.1.4.min.js"></script>
<script src="https://cdn.suoluomei.com/common/js2.0/vue/v2.5.16/vue.js"></script>
<script src="https://cdn.suoluomei.com/common/js2.0/npm/vant@2.2/lib/vant.min.js"></script>
<script>
new Vue({
el: "#Vue",
data: {
isActive: false,
isActive2: false,
x:0,
y:0,
l:0,
t:0,
left: "",
top: "",
isDown:false
},
created() {
document.documentElement.style.fontSize = 16 * document.documentElement.clientWidth / 375 + 'px'
//获取元素
// PC 端事件
// //鼠标按下事件
// dv.onmousedown = function (e) {
// //获取x坐标和y坐标
// x = e.clientX;
// y = e.clientY;
// //获取左部和顶部的偏移量
// l = dv.offsetLeft;
// t = dv.offsetTop;
// //开关打开
// isDown = true;
// //设置样式
// dv.style.cursor = 'move';
// }
// //鼠标移动
// window.onmousemove = function (e) {
// if (isDown == false) {
// return;
// }
// //获取x和y
// var nx = e.clientX;
// var ny = e.clientY;
// //计算移动后的左偏移量和顶部的偏移量
// var nl = nx - (x - l);
// var nt = ny - (y - t);
// dv.style.left = nl + 'px';
// dv.style.top = nt + 'px';
// }
// //鼠标抬起事件
// dv.onmouseup = function () {
// //开关关闭
// isDown = false;
// dv.style.cursor = 'default';
// }
// 移动 端事件
// $('#dv').bind("touchstart", function (e) {
// x = e.originalEvent.targetTouches[0].pageX
// y = e.originalEvent.targetTouches[0].pageY
// //获取左部和顶部的偏移量
// l = dv.offsetLeft;
// t = dv.offsetTop;
// //开关打开
// isDown = true;
// //设置样式
// dv.style.cursor = 'move';
// });
// $('#dv').bind("touchmove", function (e) {
// if (isDown == false) {
// return;
// }
// console.log(e.originalEvent.targetTouches[0].pageX, e.originalEvent.targetTouches[0].pageY, "坐标")
// //获取x和y
// var nx = e.originalEvent.targetTouches[0].pageX;
// var ny = e.originalEvent.targetTouches[0].pageY;
// //计算移动后的左偏移量和顶部的偏移量
// var nl = nx - (x - l);
// var nt = ny - (y - t);
// if (e.originalEvent.targetTouches[0].pageY <= 600 && e.originalEvent.targetTouches[0].pageX <= 375 && e.originalEvent.targetTouches[0].pageY > 0 && e.originalEvent.targetTouches[0].pageX > 0) {
// dv.style.left = nl + 'px';
// dv.style.top = nt + 'px';
// }
// });
// $('#dv').bind("touchend", function (e) {
// //开关关闭
// isDown = false;
// dv.style.cursor = 'default';
// });
// let that = this
// $.ajax({
// type: "get", //请求方式
// async: false,
// url: "",
// data: {}, //传值给后台
// dataType: "json",
// success: (res) => {
// console.log(res)
//
// },
// });
},
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;
//设置样式
this.isActive = true
// dv.style.cursor = 'move';
},
touchmove(e) {
if (this.isDown == false) {
return;
}
//获取x和y
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);
if (e.changedTouches[0].pageY <= 600 && e.changedTouches[0].pageX <= 375 && e.changedTouches[0].pageY > 0 && e.changedTouches[0].pageX > 0) {
this.left = nl;
this.top = nt;
}
},
touchend(e) {
//开关关闭
this.isDown = false;
this.isActive = false
this.isActive2 = true
}
}
})
</script>
</html>