JavaScript实现可拖拽、可调整大小并限制在父容器内的DIV组件

<div class="container">
  <div class="draggable">
    <div class="move">可拖拽把手</div>
    非拖拽内容
    <div class="resize"></div>
  </div>
  <div class="draggable" style="left:230px;">
    <div class="move">可拖拽把手</div>
    非拖拽内容
    <div class="resize"></div>
  </div>
</div>

html,body{
  height:100%;
  margin:0;
  padding:0;
}
*{
  box-sizing: border-box; /* 确保padding和border不增加元素总尺寸 */
}

.draggable{
  position: absolute; /* 绝对定位，便于JS控制位置 */
  padding:45px 15px 15px 15px; /* 为内容区留出空间 */
  border-radius:4px;
  background:#ddd;
  user-select: none; /* 防止拖动时选中文字 */
  left: 15px;
  top: 15px;
  min-width:200px; /* 最小宽度 */
  /* min-height可以根据需要添加 */
}
.draggable>.move{
  line-height: 30px;
  padding: 0 15px;
  background:#bbb;
  border-bottom: 1px solid #777;
  cursor:move; /* 拖动光标 */
  position:absolute;
  left:0;
  top:0;
  height:30px;
  width:100%;
  border-radius: 4px 4px 0;
}
.draggable>.resize{
  cursor:nw-resize; /* 调整大小光标 */
  position:absolute;
  right:0;
  bottom:0;
  height:16px;
  width:16px;
  border-radius: 0 0 4px 0;
  background: linear-gradient(to left top, #777 50%, transparent 50%) /* 调整大小把手的视觉效果 */
}
.container{
  left:15px;
  top:15px;
  background: #111;
  border-radius:4px;
  width:calc(100% - 30px); /* 占据视口大部分宽度 */
  height:calc(100% - 30px); /* 占据视口大部分高度 */
  position: relative; /* 确保绝对定位的子元素相对于它定位 */
  overflow: hidden; /* 隐藏超出容器的内容，虽然JS会限制，但作为安全措施 */
}

const container = document.querySelector('.container');
const draggables = document.querySelectorAll('.draggable');

draggables.forEach(elem => {
  makeDraggableResizable(elem); // 为每个可拖拽元素启用功能
  elem.addEventListener('mousedown', () => {
     // 获取当前所有可拖拽元素中最大的z-index
     const maxZ = Math.max(...[...draggables].map(elem => parseInt(getComputedStyle(elem)['z-index']) || 0));
     // 将当前点击元素的z-index设置为最大值+1，使其置顶
     elem.style['z-index'] = maxZ + 1;
  });
});

function makeDraggableResizable(draggable){

  // 辅助函数：移动元素
  const move = (x, y) => {
    // 计算新的left和top值
    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';
  };

  // 辅助函数：调整元素大小
  const resize = (x, y) => {
    // 计算新的width和height值
    x = state.fromWidth + (x - state.startX);
    y = state.fromHeight + (y - state.startY);

    // 调整大小边界限制
    // 当元素右边缘超出容器右边缘时，限制宽度
    if (state.fromX + x > container.offsetWidth) x = container.offsetWidth - state.fromX;
    // 当元素下边缘超出容器下边缘时，限制高度
    if (state.fromY + y > container.offsetHeight ) y = container.offsetHeight - state.fromY;

    // 考虑min-width和min-height，虽然CSS已设置，JS层面也可以加强
    // x = Math.max(x, parseInt(getComputedStyle(draggable).minWidth));
    // y = Math.max(y, parseInt(getComputedStyle(draggable).minHeight));

    draggable.style.width = x + 'px';
    draggable.style.height = y + 'px';
  };

  // 辅助函数：统一添加/移除全局事件监听器
  const listen = (op = 'add') =>
    Object.entries(listeners).slice(1) // 排除mousedown，因为它只在把手上监听
      .forEach(([name, listener]) => document[op + 'EventListener'](name, listener));

  // 使用Proxy管理状态，实现响应式更新和事件序列控制
  const state = new Proxy({}, {
    set(state, prop, val){
      const out = Reflect.set(...arguments); // 执行默认的属性设置
      const ops = {
        // 当startY被设置时，表示拖拽/调整大小开始
        startY: () => {
          listen(); // 添加mousemove和mouseup事件监听
          const style = getComputedStyle(draggable);
          // 记录元素初始位置和尺寸
          [state.fromX, state.fromY] = [parseInt(style.left), parseInt(style.top)];
          [state.fromWidth, state.fromHeight] = [parseInt(style.width), parseInt(style.height)];
        },
        // 当dragY被设置时（即mousemove事件触发），执行当前动作（move或resize）
        dragY: () => state.action(state.dragX, state.dragY),
        // 当stopY被设置时（即mouseup事件触发），移除mousemove和mouseup事件监听，并执行最终动作
        stopY: () => listen('remove') + state.action(state.stopX, state.stopY),
      };
      // 使用Promise.resolve().then()将操作推迟到微任务队列，确保状态更新的顺序不影响逻辑执行
      ops[prop] && Promise.resolve().then(ops[prop]);
      return out;
    }
  });

  // 全局事件监听器定义，用于捕获鼠标移动和抬起事件
  const listeners = {
    mousedown: e => Object.assign(state, {startX: e.pageX, startY: e.pageY}), // 记录鼠标初始位置
    mousemove: e => Object.assign(state, {dragY: e.pageY, dragX: e.pageX}), // 记录鼠标当前位置
    mouseup: e => Object.assign(state, {stopX: e.pageX, stopY: e.pageY}), // 记录鼠标抬起位置
  };

  // 为move和resize把手添加mousedown事件监听
  for(const [name, action] of Object.entries({move, resize})){
    draggable.querySelector(`.${name}`).addEventListener('mousedown', e => {
      state.action = action; // 设置当前要执行的动作（move或resize）
      listeners.mousedown(e); // 触发mousedown事件的初始状态设置
      e.stopPropagation(); // 阻止事件冒泡，防止父容器或其他元素也响应mousedown
    });
  }
}