/* mousedown 鼠标进入
 *  mousemove 鼠标移动
 *  mouseup 鼠标离开
 * */
let box = document.querySelector("#box");
let ccc = document.querySelector("#ccc");

ccc.onmousedown = function (event) {
  // 子盒子
  let w = ccc.getBoundingClientRect().width / 2;
  let h = ccc.getBoundingClientRect().height / 2;
  // 大盒子-小盒子
  let width = box.getBoundingClientRect().width - w;
  let height = box.getBoundingClientRect().height - h;
  // 按下的位置距离左侧的差值
  let x = event.clientX - this.offsetLeft;
  let y = event.clientY - this.offsetTop;
  // 移动
  document.onmousemove = function (e) {
    // 移动的坐标-左侧的坐标=子盒子的坐标
    let x1 = e.pageX - x;
    let y1 = e.pageY - y;
    if (-w < x1 && x1 < width) {
      ccc.style.left = x1 + "px";
    }
    if (-h < y1 && y1 < height) {
      ccc.style.top = y1 + "px";
    }
  };
  // 抬起
  document.onmouseup = function () {
    document.onmousemove = null;
    document.onmouseup = null;
  };
};