vue-cil的移动端随意拖拽图片

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移动端实现随意拖拽图片内容