移动端拖拽

今天聊一下移动端的拖拽，上周一个拖动的需求，正好整理下

场景是这样的

需要在H5邀请函里做名字栏位的拖拽，并且要能记住它的位置以便于图片合成。

用到的技术

它们都属于原生JS - 移动端监听拖拽的API。

• touchStart ：开始触摸屏幕时就触发
• touchmove：在屏幕上滑动时触发
• touchend: 屏幕上离开的时触发　　

• 其中touchStart和touchmove会提供touch对象,包含

• pageX：触摸目标在页面中的x坐标。
• pageY：触摸目标在页面中的y坐标。
  这次只用了这两个参数

  还是上点代码吧

  function dragStart(e) {
      isdrag = true;
      tempX = parseInt($('.guest_name').css('left') + 0);
      tempY = parseInt($('.guest_name').css('top') + 0);
      x = e.touches[0].pageX;
      y = e.touches[0].pageY;
  }
  function dragMove(e) {
      if (isdrag) { // 这里 e.touches[0].pageY中的pageY
          let curX = tempX + e.touches[0].pageX - x;
          let curY = tempY + e.touches[0].pageY - y;
          // 边界判断
          // curX = curX < 0 ? 0 : curX;
          curY = curY < 0 ? 0 : curY;
          curX = curX < document.documentElement.clientWidth - 80 ? curX : document.documentElement.clientWidth - 80;
          curY = curY < $('.firstPageBackground').height() - 25 ? curY : $('.firstPageBackground').height() - 25; // 这里的高度限制 $('.firstPageBackground').height() - 25 是来源于业务上，邀请函画布的高度，控制名字不能超出限制。25是名字本身的高度。都以px为单位。
          $('.guest_name').css({
              'left': 0,
              'top': curY
          });
          // 禁止浏览器默认事件
          e.preventDefault();
      }
  }
  function dragEnd() {
      isdrag = false;
  }

  好啦，还是别卖关子了，其实原理就是，利用了两次监听移动提供的pageX和pageY 之差。将差值加到原来的绝对定位，left和top里。让dom的位置发生变化。从而达到拖拽的效果。

参考链接：

blog
blog