vue图片拖拽

<img ref='btnImg' class="btn-move" @touchstart='touchStart' @touchmove='touchMove' @touchend='touchEnd' :style="slideEffect">

</img>

data:function(){

    return {isShow:false,

startX:0,//开始触摸的位置

moveX:0,//滑动时的位置

endX:0,//结束触摸的位置

disX:0,//移动距离

slideEffect:'',//滑动时的效果

},

touchStart(ev) {
    ev = ev || event;
    ev.preventDefault();
    if (ev.touches.length == 1) {
      this.startX = ev.touches[0].clientX; // 记录开始位置
    }
},
touchMove(ev) {
    ev = ev || event;
    ev.preventDefault();
    if (ev.touches.length == 1) {
      this.moveX = ev.touches[0].clientX;
      this.disX = this.moveX - this.startX;
      this.slideEffect = 'transform:translateX('+this.disX+'px)';
    }
},
 
 
touchEnd(ev) {},


猜你喜欢

转载自blog.csdn.net/ttn456456/article/details/80118754