const box = document.getElementById('box');

const ball = document.getElementById('ball');

​

let dragging = false;

let currentX, currentY;

​

const maxLeft = box.clientWidth - ball.offsetWidth;

const maxTop = box.clientHeight - ball.offsetHeight;

​

console.dir(box)

​

ball.addEventListener('mousedown', (e) => {

  // 记录坐标

  dragging = true;

  currentX = e.clientX;

  currentY = e.clientY;

});

​

document.body.addEventListener('mousemove', (e) => {

  if(dragging === false) return;

  // 计算偏移

  const deltaX = e.clientX - currentX;

  const deltaY = e.clientY - currentY;

  const currentLeft = parseFloat(ball.style.left || '0');

  const currentTop = parseFloat(ball.style.top || '0');

  let left = currentLeft + deltaX;

  let top = currentTop + deltaY;

  // 记录新坐标

  currentX = e.clientX;

  currentY = e.clientY;

  // 边界处理

  if(left > maxLeft) {

    left = maxLeft;

  } else if(left < 0) {

    left = 0;

  }

  if(top > maxTop) {

    top = maxTop;

  } else if(top < 0) {

    top = 0;

  }

  if(e.clientX < box.offsetLeft) {

    currentX = box.offsetLeft;

  } else if(e.clientX > box.offsetLeft + box.clientWidth + box.clientLeft) {

    currentX = box.offsetLeft + box.clientWidth + box.clientLeft;

  }

  if(e.clientY < box.offsetTop) {

    currentY = box.offsetTop;

  } else if(e.clientY > box.offsetTop + box.clientHeight + box.clientTop) {

    currentY = box.offsetTop + box.clientHeight + box.clientTop;

  }

  // 更改ball坐标

  ball.style.left = left + 'px';

  ball.style.top = top + 'px';

})

​

document.body.addEventListener('mouseup', () => {

  // 停止移动和记录

  dragging = false;

})