将JS侧边拖拽窗口resize代码转换为jQuery实现

以下是你提供的原生JS代码转换后的jQuery版本，完整复现拖拽调整功能：

$(function() {
  // 缓存jQuery对象，避免重复DOM查询
  const $resize = $('#resize');
  const $left = $('.left');
  const $container = $('.container');
  let drag = false;

  $resize.on('mousedown', function(e) {
    drag = true;
  });

  $container.on('mousemove', function(e) {
    if (drag) {
      // 获取拖拽条的原生尺寸信息，保持和原逻辑一致
      const resizeRect = $resize[0].getBoundingClientRect();
      // 设置左侧面板宽度
      $left.width(e.clientX - resizeRect.width / 2);
    }
  });

  // 绑定到document确保鼠标移出容器也能停止拖拽
  $(document).on('mouseup', function() {
    drag = false;
  });
});

关键说明： #

1. 原生方法复用：直接通过$resize[0]获取jQuery对象对应的原生DOM元素，调用getBoundingClientRect()获取准确的元素尺寸，这比单独用jQuery的.width()更贴合原逻辑（原代码依赖视口内的实际尺寸计算）
2. 事件处理优化：将mouseup事件绑定到document而非容器，解决原代码中鼠标移出容器后无法停止拖拽的问题
3. 变量简化：移除原代码中重复声明的变量，缓存jQuery对象提升性能

可选扩展（限制最小宽度）： #

如果需要限制左侧面板的最小宽度，可修改mousemove事件内的逻辑：

$container.on('mousemove', function(e) {
  if (drag) {
    const resizeRect = $resize[0].getBoundingClientRect();
    const minWidth = 100; // 最小宽度值
    const newWidth = e.clientX - resizeRect.width / 2;
    $left.width(Math.max(newWidth, minWidth));
  }
});

内容的提问来源于stack exchange，提问作者Lukas Andel