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);
  };
複製代碼