移动端拖动元素事件

　　移动端页面有时候会有在页面中显示浮动按钮的需求，这个浮动按钮有时候会遮盖下面的文字图片等内容，这个时候就有了拖动的需求，

　　下面是封装好的方法，可以直接使用

　　

/**
 * 拖动元素事件
 * @param {*} obj  [ 结构 { element, distanceTop, distanceLeft, distanceRight, distanceBottom } 
 */
function dragElement(obj) {
  const dragNode = obj.element;
  const distanceTop = obj.distanceTop || 0;
  const distanceLeft = obj.distanceLeft || 0;
  const distanceRight = obj.distanceRight || 0;
  const distanceBottom = obj.distanceBottom || 0;
  //限制最大宽高，不让滑块出去
  let maxW = document.body.clientWidth - dragNode.offsetWidth;
  let maxH = document.body.clientHeight - dragNode.offsetHeight;
  if (distanceRight) {
    maxW = maxW - distanceRight
  }
  if (distanceBottom) {
    maxH = maxH - distanceBottom
  }

  let oL,oT;
  //手指触摸开始，记录div的初始位置
  dragNode.addEventListener('touchstart', function(e) {
    var ev = e || window.event;
    var touch = ev.targetTouches[0];
    oL = touch.clientX - dragNode.offsetLeft;
    oT = touch.clientY - dragNode.offsetTop;
    document.addEventListener("touchmove", defaultEvent, false);
  });
  //触摸中的，位置记录
  dragNode.addEventListener('touchmove', function(e) {
    const ev = e || window.event;
    const touch = ev.targetTouches[0];
    let oLeft = touch.clientX - oL;
    let oTop = touch.clientY - oT;
    if(oLeft < distanceLeft) {
      oLeft = distanceLeft;
    } else if(oLeft >= maxW) {
      oLeft = maxW;
    }
    if(oTop < distanceTop) {
      oTop = distanceTop;
    } else if(oTop >= maxH) {
      oTop = maxH;
    }
    dragNode.style.left = oLeft + 'px';
    dragNode.style.top = oTop + 'px';
  });
  //触摸结束时的处理
  dragNode.addEventListener('touchend', function() {
    document.removeEventListener("touchmove", defaultEvent);
  });
  //阻止默认事件
  function defaultEvent(e) {
    e.preventDefault();
  }
}

 

　　使用时只需要这么用：

// 拖动元素事件
utils.dragElement({
  element: $('#drag-node')[0]
})

 

　　就可以了，这个是拖动到哪里就停在哪里~