移动端拖拽

移动端事件-触摸事件

1. touchstart 手指触摸DOM元素事件
2. touchmove 手指在DOM元素身上移动
3. touchend 手指离开DOM元素事件

触摸事件对象 TouchEvent

1. touches 正在触摸屏幕的所有手指
2. targetTouches 正在触摸当前元素的手指列表
3. changedTouches 手指状态发生改变的列表

手指离开屏幕的时候没有touches和targetTouches但是有changedTouches

元素拖拽js代码

	  var div = document.querySelector('div');
      var startX = 0; // 手指触摸的位置
      var startY = 0;
      var divX = 0; // 盒子的位置
      var divY = 0;
      div.addEventListener('touchstart',function(e){
          startX = e.targetTouches[0].pageX;
          startY = e.targetTouches[0].pageY;
          divX = this.offsetLeft;
          divY = this.offsetTop;
      })
      div.addEventListener('touchmove',function(e){
          var moveX = e.targetTouches[0].pageX - startX; // 手指的移动距离
          var moveY = e.targetTouches[0].pageY - startY;
          div.style.left = divX + moveX + 'px';
          div.style.top = divY + moveY + 'px';
          e.preventDefault(); // 阻止页面滚动的默认行为
      })