使用共享状态和Proxy模式管理多事件监听器间的逻辑依赖

<div class="container">
  <div class="draggable">Draggable</div>
</div>

html,body{
  height:100%;
  margin:0;
  padding:0;
}
div.draggable{
  position: absolute; /* 绝对定位，使其可以被拖拽 */
  padding:30px;
  border-radius:4px;
  background:#ddd;
  cursor:move; /* 鼠标悬停时显示移动光标 */
  user-select: none; /* 防止拖拽时选中文字 */
  left: 15px;
  top: 15px;
}
div.container{
  left:15px;
  top:15px;
  background: #111;
  border-radius:44px;
  width:calc(100% - 30px);
  height:calc(100% - 30px);
  position: relative; /* 相对定位，作为draggable的定位参考 */
}

const container = document.querySelector('div.container');
const draggable = document.querySelector('div.draggable');

/**
 * 根据当前状态更新可拖拽元素的位置
 * @param {number} x - 鼠标当前X坐标
 * @param {number} y - 鼠标当前Y坐标
 */
const move = (x, y) => {
  // 计算新的位置，基于初始位置和鼠标位移
  x = state.fromX + (x - state.startX);
  y = state.fromY + (y - state.startY);

  // 边界检查：确保元素不超出容器范围
  if (x < 0) x = 0;
  else if (x + draggable.offsetWidth > container.offsetWidth) x = container.offsetWidth - draggable.offsetWidth;

  if (y < 0) y = 0;
  else if (y + draggable.offsetHeight > container.offsetHeight) y = container.offsetHeight - draggable.offsetHeight;

  // 应用新位置
  draggable.style.left = x + 'px';
  draggable.style.top = y + 'px';
};

/**
 * 动态添加或移除mousemove和mouseup事件监听器
 * @param {'add'|'remove'} op - 操作类型，'add'或'remove'
 */
const listen = (op = 'add') => 
  Object.entries(listeners).slice(1) // 排除mousedown，因为它始终存在
    .forEach(([name, listener]) => document[op + 'EventListener'](name, listener));

// 定义共享状态对象，并用Proxy进行包装
const state = new Proxy({}, {
  set(target, prop, val){
    const out = Reflect.set(target, prop, val); // 执行默认的属性设置

    // 根据不同的状态属性变化，执行相应的操作
    const ops = {
      // 当startY被设置时，表示拖拽开始，需要记录元素的初始位置并添加mousemove/mouseup监听器
      startY: () => {
        listen(); // 添加mousemove和mouseup监听器
        const style = getComputedStyle(draggable); 
        [state.fromX, state.fromY] = [parseInt(style.left), parseInt(style.top)];
      },
      // 当dragY被设置时（mousemove事件），执行移动操作
      dragY: () => move(state.dragX, state.dragY),
      // 当stopY被设置时（mouseup事件），表示拖拽结束，移除mousemove/mouseup监听器并执行最终移动
      stopY: () => listen('remove') + move(state.stopX, state.stopY),
    };

    // 使用Promise.resolve().then()将操作作为微任务延迟执行。
    // 这确保了在ops[prop]执行时，所有相关的state属性（如dragX, dragY）都已在当前事件循环中被设置，
    // 从而避免了因属性设置顺序导致的潜在问题。
    ops[prop] && Promise.resolve().then(ops[prop]);
    return out;
  }
});

// 定义事件监听器对象
const listeners = {
  // mousedown事件：记录拖拽起始的鼠标位置
  mousedown: e => Object.assign(state, {startX: e.pageX, startY: e.pageY}),
  // mousemove事件：更新拖拽中的鼠标位置
  mousemove: e => Object.assign(state, {dragY: e.pageY, dragX: e.pageX}),
  // mouseup事件：记录拖拽结束的鼠标位置
  mouseup: e => Object.assign(state, {stopX: e.pageX, stopY: e.pageY}),
};

// 为可拖拽元素添加mousedown监听器，这是拖拽的入口
draggable.addEventListener('mousedown', listeners.mousedown);