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

<div class="container">
  <div class="draggable" style="left: 15px; top: 15px;">
    <div class="move">可拖拽区域</div>
    非拖拽内容
    <div class="resize"></div>
  </div>
  <div class="draggable" style="left: 230px; top: 15px;">
    <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: 100px; /* 最小高度 (根据内容和padding调整) */
  z-index: 9; /* 初始z-index */
}
.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 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; /* 相对定位，作为draggable元素的参照 */
  overflow: hidden; /* 确保即使有bug，内容也不会溢出 */
}

const container = document.querySelector('.container'); // 获取父容器

// 获取所有可拖拽/调整大小的元素
const draggables = document.querySelectorAll('.draggable');

draggables.forEach(elem => {
  makeDraggableResizable(elem); // 为每个元素初始化功能
  // 鼠标按下时，将当前操作的元素Z-index提高，使其浮于其他元素之上
  elem.addEventListener('mousedown', () => {
     const maxZ = Math.max(...[...draggables].map(elem => parseInt(getComputedStyle(elem)['z-index']) || 0));
     elem.style['z-index'] = maxZ + 1;
  });
});

/**
 * 为给定的元素添加拖拽和调整大小功能，并限制在父容器内。
 * @param {HTMLElement} draggable - 需要添加功能的元素。
 */
function makeDraggableResizable(draggable){

  /**
   * 移动元素。
   * @param {number} x - 鼠标的当前X坐标。
   * @param {number} y - 鼠标的当前Y坐标。
   */
  const move = (x, y) => {
    // 计算新的left和top值
    let newX = state.fromX + (x - state.startX);
    let newY = state.fromY + (y - state.startY);

    // 移动边界检查
    if (newX < 0) newX = 0; // 左边界
    else if (newX + draggable.offsetWidth > container.offsetWidth) newX = container.offsetWidth - draggable.offsetWidth; // 右边界

    if (newY < 0) newY = 0; // 上边界
    else if (newY + draggable.offsetHeight > container.offsetHeight) newY = container.offsetHeight - draggable.offsetHeight; // 下边界

    draggable.style.left = newX + 'px';
    draggable.style.top = newY + 'px';
  };

  /**
   * 调整元素大小。
   * @param {number} x - 鼠标的当前X坐标。
   * @param {number} y - 鼠标的当前Y坐标。
   */
  const resize = (x, y) => {
    // 计算新的width和height值
    let newWidth = state.fromWidth + (x - state.startX);
    let newHeight = state.fromHeight + (y - state.startY);

    // 最小尺寸限制
    const minWidth = parseInt(getComputedStyle(draggable).minWidth);
    const minHeight = parseInt(getComputedStyle(draggable).minHeight);
    if (newWidth < minWidth) newWidth = minWidth;
    if (newHeight < minHeight) newHeight = minHeight;

    // 调整大小边界检查 (基于元素当前left/top和父容器尺寸)
    if (state.fromX + newWidth > container.offsetWidth) newWidth = container.offsetWidth - state.fromX; // 右边界
    if (state.fromY + newHeight > container.offsetHeight ) newHeight = container.offsetHeight - state.fromY; // 下边界

    draggable.style.width = newWidth + 'px';
    draggable.style.height = newHeight + 'px';
  };

  /**
   * 添加或移除全局事件监听器。
   * @param {'add'|'remove'} op - 操作类型，'add'或'remove'。
   */
  const toggleGlobalListeners = (op = 'add') =>
    Object.entries(globalListeners).slice(1) // 排除 mousedown，因为它在内部处理
      .forEach(([name, listener]) => document[op + 'EventListener'](name, listener));

  // 使用Proxy管理状态，当状态变化时自动执行相应的操作
  const state = new Proxy({}, {
    set(target, prop, val){
      const out = Reflect.set(...arguments); // 执行默认的设置操作
      const ops = {
        startY: () => { // 鼠标按下时，初始化拖拽/调整大小的起始状态
          toggleGlobalListeners(); // 添加全局mousemove和mouseup监听
          const style = getComputedStyle(draggable);
          // 记录元素当前的left, top, width, height
          [target.fromX, target.fromY] = [parseInt(style.left), parseInt(style.top)];
          [target.fromWidth, target.fromHeight] = [parseInt(style.width), parseInt(style.height)];
        },
        dragY: () => target.action(target.dragX, target.dragY), // 鼠标移动时，执行拖拽或调整大小操作
        stopY: () => toggleGlobalListeners('remove') + target.action(target.stopX, target.stopY), // 鼠标松开时，移除全局监听并执行最后一次操作
      };
      // 使用Promise.resolve().then()将操作推迟为微任务，确保状态设置的顺序不影响操作执行
      ops[prop] && Promise.resolve().then(ops[prop]);
      return out;
    }
  });

  // 全局事件监听器，用于捕获mousemove和mouseup事件
  const globalListeners = {
    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}), // 记录鼠标松开时的最终坐标
  };

  // 为拖拽手柄和调整大小手柄添加mousedown事件监听
  for(const [name, action] of Object.entries({move, resize})){
    draggable.querySelector(`.${name}`).addEventListener('mousedown', e => {
      e.stopPropagation(); // 阻止事件冒泡，避免与父元素的mousedown冲突
      state.action = action; // 设置当前要执行的操作（move或resize）
      globalListeners.mousedown(e); // 调用mousedown处理函数，初始化state
    });
  }
}