20190529 div-拖动drag（一）

拖拽的过程须要记录三个过程三个数据：

1. 鼠标按下：
   1) 被拖拽元素的位置oPos : offsetLeft offsetTop
   2) 鼠标点击的位置cPos : event.clientX event.clientY
2. 鼠标移动：
   鼠标移动的位置mPos : event.clientX event.clientY

计算公式：元素的位置 = 元素的位置+鼠标移动位置差值---> oPos + (mPos - cPos)

实践代码以下

<style> * { margin: 0; padding: 0; } #container { border: 1px solid #000; position: absolute; left: 30px; top: 50px; width: 1000px; height: 800px; } #dragEl { position: absolute; width: 50px; height: 50px; border: 1px solid #000; left: 10px; top: 10px; } </style>
<div id="container">
  <div id="dragEl"></div>
</div>
复制代码

const container = document.getElementById('container');
  const dragEl = document.getElementById('dragEl');

  dragEl.onmousedown = function (ev) {
    const thisEl = this;
    const width = thisEl.clientWidth;
    const height = thisEl.clientHeight;

    // 边界
    const maxLeft = 1000 - width;
    const maxTop = 800 - height;

    // 元素当前的位置
    const offsetX = thisEl.offsetLeft;
    const offsetY = thisEl.offsetTop;

    // 点击的位置
    const currentX = ev.clientX;
    const currentY = ev.clientY;

    // 计算位置
    const moveFn = function (event) {
      // 移动的位置
      const moveX = event.clientX;
      const moveY = event.clientY;

      // 位置 = (移动位置 - 点击的位置) + 元素的初始位置
      // 移动位置 - 点击的位置 ===> 这个计算的鼠标移动的位置差--变化量
      let posX = moveX - currentX + offsetX;
      let posY = moveY - currentY + offsetY;

      // 边界位置判断
      if (posX >= maxLeft) posX = maxLeft;
      if (posX <= 0) posX = 0;
      if (posY >= maxTop) posY = maxTop;
      if (posY <= 0) posY = 0;

      // 对元素的位置进行赋值
      thisEl.style.left = posX + 'px';
      thisEl.style.top = posY + 'px';
    };

    // document-mouseup
    // 移出边界后取消事件监听--->在任什么时候候，鼠标抬起以后就应该取消事件
    const docMouseupHandle = function () {
      document.removeEventListener('mousemove', moveFn);
      document.removeEventListener('mouseup', docMouseupHandle);
    };

    // move
    document.addEventListener('mousemove', moveFn, false);

    // 中止监听move
    document.addEventListener('mouseup', docMouseupHandle, false);
  };
复制代码