touch移动指令

因为项目需要，需要写一个触屏移动的效果，所以自己封装了一个touch移动指令

function BdttTouch(el, binding, type) {
  this.el = el;
  this.binding = binding;
  this.type = type;
  this.isMove = true;

  this._callBack = (typeof binding.value === 'object') ? binding.value.fn : binding.value;

  this._timer = null;
  this._position = { x: 0, y: 0 };
  this._longTouch = true;
  this._isMove = false;
  this._isLeave = false;

  this._startX = 0;
  this._startY = 0;

  if (this.el) {
    this.el.addEventListener('touchstart', (e) => {
      this.start(e);

      this.el.removeEventListener("touchmove",this.move,false);
      this.el.removeEventListener("touchend",this.end,false);

      this.el.addEventListener('touchmove', (e) => {
        this.move(e);
      },false);

      this.el.addEventListener('touchend', (e) => {
        this.end(e);
      },false);
      e.stopPropagation();
    },false);
  }
}

BdttTouch.prototype = {
  start: function (e) {
    var _targetTouches = e.targetTouches[0];
    this._position = { x: _targetTouches.pageX, y: _targetTouches.pageY };

    this._longTouch = true;
    this._isMove = false;
    this._isLeave = false;

    this._startX = _targetTouches.pageX  - this.el.offsetLeft;
    this._startY = _targetTouches.pageX  - this.el.offsetTop;

    this._timer = setTimeout(() => {
      if (!this._isMove && !this._isLeave) {
        this.type === 'longtap' && (this._callBack(e));
        this._longTouch = false;
      }
    }, 1000);
  },
  end: function (e) {
    clearTimeout(this._timer);

    if (this._longTouch && !this._isMove) {
      this.type === 'tap' && (this._callBack([e]));
      this._isLeave = true;
    }
  },
  move: function (e) {
    this._isMove = true;

    var _targetTouches = e.targetTouches[0];
    var disX = _targetTouches.pageX - this._startX;
    var disY = _targetTouches.pageY - this._startY;

    this.swipe(e, disX, disY);
  },
  swipe: function (e, disX, disY) {
    clearTimeout(this._timer);

    if (Math.abs(disX) > 5 || Math.abs(disY) > 5) {
      if (this.type === 'swipe') {
        this.moveElement(disX, disY);
        this._callBack(e);
      }
      if (disX > 5 && this.type === 'swiperight') {
        this.moveElement(disX, null);
        this._callBack(e);
      }
      if (disX < -5 && this.type === 'swipeleft') {
        this.moveElement(disX, null);
        this._callBack(e);
      }
      if (disY > 5 && this.type === 'swipedown') {
        this.moveElement(null, disY);
        this._callBack(e);
      }
      if (disY < -5 && this.type === 'swipeup') {
        this.moveElement(null, disY);
        this._callBack(e);
      }

      return true;
    } else {
      return false;
    }
  },
  moveElement: function (disX, disY) {
    if(disX){
      let parentNode = this.el.parentNode,
          width= this.el.offsetWidth;
      if((parentNode.offsetWidth - width ) >= disX){
        this.el.style.left = parentNode.offsetWidth - width + 'px';
      }else if(disX > 0){
        this.el.style.left = 0 + 'px';
      }else{
        this.el.style.left = disX + 'px';
      }
    }

    if(disY){
      let parentNode = this.el.parentNode,
          height= this.el.offsetHeight;
      if((parentNode.offsetHeight - height ) >= disY){
        this.el.style.top = parentNode.offsetHeight - height + 'px';
      }else if(disY > 0){
        this.el.style.top = 0 + 'px';
      }else{
        this.el.style.top = disX + 'px';
      }
    }
  }
}

export let TapDirective = {
  twoWay: true,
  bind(el, binding, vnode) {
    new BdttTouch(el, binding, 'tap');
  }
};

export let LongTapDirective = {
  twoWay: true,
  bind(el, binding, vnode) {
    new BdttTouch(el, binding, 'longtap');
  },
}

export let SwipeDirective = {
  twoWay: true,
  bind(el, binding, vnode) {
    new BdttTouch(el, binding, 'swipe');
  },
}

export let SwipeLeftDirective = {
  twoWay: true,
  bind(el, binding, vnode) {
    new BdttTouch(el, binding, 'swipeleft');
  },
}

export let SwipeRightDirective = {
  twoWay: true,
  bind(el, binding, vnode) {
    new BdttTouch(el, binding, 'swiperight');
  },
}

export let SwipeDownDirective = {
  twoWay: true,
  bind(el, binding, vnode) {
    new BdttTouch(el, binding, 'swipedown');
  },
}

export let SwipeUpDirective = {
  twoWay: true,
  bind(el, binding, vnode) {
    new BdttTouch(el, binding, 'swipeup');
  },
}

export let SwipeDirective = {
  twoWay: true,
  bind(el, binding, vnode) {
    new BdttTouch(el, binding, 'swipe');
  },
}

export let SwipeLeftDirective = {
  twoWay: true,
  bind(el, binding, vnode) {
    new BdttTouch(el, binding, 'swipeleft');
  },
}

export let SwipeRightDirective = {
  twoWay: true,
  bind(el, binding, vnode) {
    new BdttTouch(el, binding, 'swiperight');
  },
}

export let SwipeDownDirective = {
  twoWay: true,
  bind(el, binding, vnode) {
    new BdttTouch(el, binding, 'swipedown');
  },
}

export let SwipeUpDirective = {
  twoWay: true,
  bind(el, binding, vnode) {
    new BdttTouch(el, binding, 'swipeup');
  },
}