vue-cil的移动端随意拖拽图片并且点击跳转页面
方法一、通过不断的改变left 和top值实现拖拽,(适合使用PC,移动端低端机不流畅):
<template>
<div>
<div id="pic" class="backIcon" @click="$router.push('/disclose')">
<img src="../assets/images/fc.png" />
</div>
</div>
</template>
<script>
export default {
name: "index",
data(){
return{
position: { x: 0, y: 0 },
nx: '', ny: '', dx: '', dy: '', xPum: '', yPum: '',x:'',y:''
}
},
mounted() {
let moveDiv = document.querySelector("#pic");
this.w = document.documentElement.clientWidth || document.body.clientWidth;
this.h = document.documentElement.clientHeight || document.body.clientHeight;
this.x = moveDiv.offsetWidth;
this.y = moveDiv.offsetHeight;
moveDiv.addEventListener('touchstart', this.down, { passive: false })
moveDiv.addEventListener('touchmove', this.move, { passive: false })
},
methods:{
down(){
let moveDiv = document.querySelector("#pic");
var touch;
if(event.touches){
touch = event.touches[0];
}else {
touch = event;
}
this.position.x = touch.clientX;
this.position.y = touch.clientY;
this.dx = moveDiv.offsetLeft; //左偏移量
this.dy = moveDiv.offsetTop; //上移量
},
move(){
let moveDiv = document.querySelector("#pic")
var touch ;
if(event.touches){
touch = event.touches[0];
}else {
touch = event;
}
//组织默认事件,防止body滑动
event.preventDefault();
this.nx = touch.clientX - this.position.x;
this.ny = touch.clientY - this.position.y;
this.xPum = this.dx+this.nx;
this.yPum = this.dy+this.ny;
//边界判断
this.xPum = this.xPum>0?this.xPum:0;
this.yPum = this.yPum>0?this.yPum:0;
this.xPum = this.xPum>this.w-this.x?this.w-this.x:this.xPum;
this.yPum = this.yPum>this.h-this.y?this.h-this.y:this.yPum;
moveDiv.style.left = this.xPum+"px";
moveDiv.style.top = this.yPum +"px";
}
}
}
</script>
<style scoped>
.backIcon{
position: fixed;
left:0;
top:0;
z-index: 1;
}
</style>
方法二、通过实现拖拽,(相对比较流畅,推荐使用):
<template>
<div>
<div id="pic" class="backIcon" @click="$router.push('/disclose')">
<img src="../assets/images/fc.png" />
</div>
</div>
</template>
<script>
export default {
name: "ces",
data(){
return{
position: { x: 0, y: 0 },
cx: '', cy: '',x:'',y:'',l:'',t:'',r:'',b:''
}
},
mounted() {
let moveDiv = document.querySelector("#pic");
this.w = document.documentElement.clientWidth || document.body.clientWidth;
this.h = document.documentElement.clientHeight || document.body.clientHeight;
this.x = moveDiv.offsetWidth;
this.y = moveDiv.offsetHeight;
//使用二级事件绑定,解决浏览器警告,可自行查询
moveDiv.addEventListener('touchstart', this.down, { passive: false })
moveDiv.addEventListener('touchmove', this.move, { passive: false })
moveDiv.addEventListener('touchend', this.end, { passive: false })
//可移动边界判断
this.l = moveDiv.offsetLeft;
this.t = moveDiv.offsetTop;
this.r = this.w - this.l - this.x;
this.b = this.h - this.t - this.y;
},
methods:{
// 实现移动端拖拽
down(event){
let moveDiv = document.querySelector("#pic");
this.position.x = moveDiv.offsetLeft;
this.position.y = moveDiv.offsetTop;
let touch;
if(event.touches){
touch = event.touches[0];
}else {
touch = event;
}
//光标起始位置
this.cx = touch.clientX;
this.cy = touch.clientY;
},
move(event){
let moveDiv = document.querySelector("#pic");
let touch;
if(event.touches){
touch = event.touches[0];
}else {
touch = event;
}
event.preventDefault(); //阻止body滚动
//光标偏移量
this.curx = touch.clientX - this.cx;
this.cury = touch.clientY - this.cy;
//DOM 运动边界判断
if(this.curx>0){//向右
this.curx = Math.abs(this.curx)>this.r?this.r:this.curx;
}else{ //向左
this.curx = Math.abs(this.curx)>this.l?-this.l:this.curx;
}
if(this.cury>0){//向下
this.cury = Math.abs(this.cury)>this.b?this.b:this.cury
}else{ //向上
this.cury = Math.abs(this.cury)>this.t?-this.t:this.cury
}
//DOM 运动
moveDiv.style.transform = `translate(${this.curx}px,${this.cury}px)`;
},
end() {
let moveDiv = document.querySelector("#pic");
//光标松开,记录盒子的位移。
let aa = parseInt(moveDiv.style.transform.match(/(-?\d+\.?\d+)/g)[0]); //获取X偏移量
let bb = parseInt(moveDiv.style.transform.match(/(-?\d+\.?\d+)/g)[1]); //获取Y偏移量
let ax = parseInt(this.position.x) + aa; //DOMX轴偏移量
let by = parseInt(this.position.y) + bb; //DOMY轴偏移量
// 处理吸边
//ax = ax>this.w/2?this.w-this.x:0;
//end 时,重绘DOM位置,并清空transform的值。
moveDiv.style.left = ax + 'px';
moveDiv.style.top = by + 'px';
moveDiv.style.transform = '';
//可移动边界判断
this.l = ax;
this.t = by;
this.r = this.w - this.l - this.x;
this.b = this.h - this.t - this.y;
}
}
}
</script>
<style scoped>
.backIcon{
position: fixed;
left:0;
top:0;
z-index: 1;
}
</style>
以上就是vue-cli移动端实现随意拖拽图片内容