网页图片鼠标拖动调整：jQuery Resizable失效排查及替代方案咨询

嘿，我来帮你排查jQuery Resizable失效的问题，顺便给你推荐更轻量化的原生JS实现方案～

你的代码里Draggable正常但Resizable没反应，大概率是这几个坑没踩对：

• 缺了jQuery UI的样式文件：Resizable需要依赖jQuery UI的CSS来渲染右下角的调整手柄（那个小方块），没引入的话，就算JS加载了，你也看不到可拖拽的手柄，看起来就像功能失效了。
• jQuery UI组件不全：可能你只引入了Draggable模块，没把Resizable的部分加上，或者没引入完整的jQuery UI库。
• 元素样式冲突：比如你的容器div或者内部img的宽高设置、overflow属性可能影响了Resizable的工作，比如img固定宽高的话，容器变大了图片也不会跟着变。

给你修正后的完整代码，确保所有依赖都配齐：

<head>
  <!-- 先引入jQuery核心库 -->
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <!-- 引入jQuery UI的样式表，这个是Resizable显示手柄的关键 -->
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <!-- 引入完整的jQuery UI库，包含Draggable和Resizable -->
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
  
  <script> 
    $(function() {
      // 同时初始化拖拽和调整大小
      $("#yoman")
        .draggable()
        .resizable({
          // 加上这个回调，让内部图片跟着容器一起缩放
          resize: function(event, ui) {
            $(this).find('img').css({
              width: ui.size.width,
              height: ui.size.height
            });
          }
        });
    });
  </script>
</head>
<body>
  <!-- 给容器设置初始宽高，让Resizable有基准尺寸 -->
  <div id="yoman" class="ui-widget-content" style="width:100px; height:100px; padding:0;">
    <!-- 图片设为100%宽高，自动适配容器 -->
    <img src="https://www.froala.com/assets/blog/pages/post41_2.png" style="width:100%; height:100%;">
  </div>
</body>

如果不想依赖jQuery和jQuery UI，用纯原生JS也能轻松实现，还更轻量化：

<head>
  <style>
    #yoman {
      position: absolute;
      width: 100px;
      height: 100px;
      background: #eee;
      border: 1px solid #ccc;
      cursor: move;
      overflow: hidden;
    }
    #yoman img {
      width: 100%;
      height: 100%;
      object-fit: cover; /* 可选，保持图片比例不变 */
    }
    /* 自定义调整大小的手柄样式 */
    #resize-handle {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 15px;
      height: 15px;
      background: #555;
      border-radius: 2px;
      cursor: se-resize;
    }
  </style>
</head>
<body>
  <div id="yoman">
    <img src="https://www.froala.com/assets/blog/pages/post41_2.png">
    <div id="resize-handle"></div>
  </div>

  <script>
    const container = document.getElementById('yoman');
    const resizeHandle = document.getElementById('resize-handle');
    
    // --- 实现拖拽功能 ---
    let isDragging = false;
    let dragStartX, dragStartY, containerX, containerY;

    container.addEventListener('mousedown', (e) => {
      // 点击调整手柄时不触发拖拽
      if (e.target === resizeHandle) return;
      
      isDragging = true;
      // 记录初始位置
      dragStartX = e.clientX;
      dragStartY = e.clientY;
      containerX = parseInt(window.getComputedStyle(container).left) || 0;
      containerY = parseInt(window.getComputedStyle(container).top) || 0;
      
      // 全局监听鼠标移动和抬起，避免移出容器后拖拽中断
      document.addEventListener('mousemove', onDrag);
      document.addEventListener('mouseup', stopDrag);
    });

    function onDrag(e) {
      if (!isDragging) return;
      const dx = e.clientX - dragStartX;
      const dy = e.clientY - dragStartY;
      container.style.left = `${containerX + dx}px`;
      container.style.top = `${containerY + dy}px`;
    }

    function stopDrag() {
      isDragging = false;
      // 移除全局监听
      document.removeEventListener('mousemove', onDrag);
      document.removeEventListener('mouseup', stopDrag);
    }

    // --- 实现调整大小功能 ---
    let isResizing = false;
    let resizeStartX, resizeStartY, containerWidth, containerHeight;

    resizeHandle.addEventListener('mousedown', (e) => {
      isResizing = true;
      // 记录初始尺寸和鼠标位置
      resizeStartX = e.clientX;
      resizeStartY = e.clientY;
      containerWidth = parseInt(window.getComputedStyle(container).width);
      containerHeight = parseInt(window.getComputedStyle(container).height);
      
      document.addEventListener('mousemove', onResize);
      document.addEventListener('mouseup', stopResize);
      // 阻止事件冒泡，避免触发拖拽逻辑
      e.stopPropagation();
    });

    function onResize(e) {
      if (!isResizing) return;
      const dx = e.clientX - resizeStartX;
      const dy = e.clientY - resizeStartY;
      // 限制最小尺寸，避免缩得太小
      const newWidth = Math.max(50, containerWidth + dx);
      const newHeight = Math.max(50, containerHeight + dy);
      container.style.width = `${newWidth}px`;
      container.style.height = `${newHeight}px`;
    }

    function stopResize() {
      isResizing = false;
      document.removeEventListener('mousemove', onResize);
      document.removeEventListener('mouseup', stopResize);
    }
  </script>
</body>

这个原生方案的好处：

• 完全不依赖第三方库，加载速度更快
• 样式和逻辑都可以完全自定义，比如你可以给调整手柄加样式、设置最小缩放尺寸、保持图片比例等
• 代码逻辑清晰，容易根据自己的需求修改

内容的提问来源于stack exchange，提问作者James Thomas