封装移动端 vue 拖拽指令

// 绑定类
class moveBuuild {

  constructor (private ele: any) {
    console.log(ele, 'element')
    this.ele = ele;
    this.init();
  }

  domPosition = {
    x: 0,
    y: 0
  }

  startPosition = {
      x: 0,
      y: 0
  }

  openMove = false
  transitionMove = {
      transform: `translate( 0px, 0px )`,
      background: 'red'
  }

  setMove (x = 0, y = 0){
    this.ele.style.transform = `translate( ${x}px, ${y}px )`;
    this.ele.style.background = 'red';
  }

  init () {
    this.ele.addEventListener('touchstart', (e: any) => this.start(e));
    this.ele.addEventListener('touchmove', (e: any) => this.move(e));
    this.ele.addEventListener('touchend', (e: any) => this.end(e));
    this.setMove();
  }
  
  start (e: any){
      const el = e.target;
      const { pageX, pageY } = e.changedTouches[0];
      this.startPosition = {
          x: pageX,
          y: pageY
      }
      const domPosition = el.style.transform.match(/[\d]+.?[\d]*px/igm);
      this.domPosition = {
          x: parseInt(domPosition[0].replace('px', '')),
          y: parseInt(domPosition[1].replace('px', '')),
      }
      this.openMove = true;
  }

  move(e: any){

      if( !this.openMove ){ return };
      const { pageX, pageY } = e.changedTouches[0];
      const movePoisition = {
          x: pageX,
          y: pageY
      }
      const x = movePoisition.x - this.startPosition.x + this.domPosition.x;
      const y = movePoisition.y - this.startPosition.y + this.domPosition.y;
      const moveStyle = {
          transform: `translate( ${x}px, ${y}px )`,
          background: 'red'
      }

      this.setMove(x, y);
      this.transitionMove = moveStyle;
  }

  end (e: any){
      this.openMove = false;
  }
  
}

// 配置指令
Vue.directive('move', {
  inserted: el =>{
    new moveBuuild(el);
  }
})