使用jQuery UI Resizable时如何保持元素居中？

初始代码示例（第一个图片因Resizable无法居中）：

<!DOCTYPE html>

<script src="https://code.jquery.com/jquery-3.6.1.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script>
setTimeout(() => {      //"setTimeout()" runs only once! (Ensures that all required scripts are already loaded, especially when injecting this code in browsers!)
    $(document).ready(function() {
    $( "[Resize]" ).resizable({aspectRatio: true});
    $( "[Drag-Move]" ).draggable();
    });
}, "1000");     //1000 milliseconds = 1 second
</script>

<div style=" text-align: center !important; border:2px solid red; display:inline-block; color:red;"  Drag-Move>
<img width="50" style=" text-align: center !important;"  src="https://i.imgur.com/FHjzFv3.jpg"  Resize>
<p>Wonder Boss</p>
</div>

<div style=" text-align: center !important; border:2px solid red; display:inline-block; color:red;"  Drag-Move>
<img width="50" style=" text-align: center !important;"  src="https://i.imgur.com/FHjzFv3.jpg"  >
<p>Wonder Boss</p>
</div>

问题根源 #

jQuery UI Resizable会自动给目标图片包裹一个ui-wrapper容器，但该容器的定位逻辑存在缺陷，导致图片偏离居中位置。此外，直接给图片绑定Draggable时，图片无法在父容器内正常拖拽。

jQuery UI源码中ui-wrapper的实现片段：

this.element.wrap(
            $( "<div class='ui-wrapper'></div>" ).css( {
                overflow: "hidden",
                position: this.element.css( "position" ),
                width: this.element.outerWidth(),
                height: this.element.outerHeight(),
                top: this.element.css( "top" ),
                left: this.element.css( "left" )
            } )
        );

过渡解决方案（存在高度适配问题） #

尝试用div包裹图片，但div无法自动适配图片高度：

<!DOCTYPE html>

<script src="https://code.jquery.com/jquery-3.6.1.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script>
setTimeout(() => {      //"setTimeout()" runs only once! (Ensures that all required scripts are already loaded, especially when injecting this code in browsers!)
    $(document).ready(function() {
    $( "[Resize]" ).resizable({aspectRatio: true});
    $( "[Drag-Move]" ).draggable();
    });
}, "1000");     //1000 milliseconds = 1 second
</script>

<div style=" text-align: center !important; border:2px solid red; display:inline-block; color:red; overflow:hidden;"  Drag-Move>
    <div style=" width:50px; border:2px solid green; display:inline-block;" resize Drag-Move>
    <img width="100%"  src="https://i.imgur.com/FHjzFv3.jpg"  >
    </div >
<p>Wonder Boss</p>
</div>

<div style=" text-align: center !important; border:2px solid red; display:inline-block; color:red;"  Drag-Move>
<img width="50" style=" text-align: center !important;"  src="https://i.imgur.com/FHjzFv3.jpg"  Drag-Move resize>
<p>Wonder Boss</p>
</div>

最终可行解决方案 #

以下代码可同时解决居中、拖拽和缩放问题，核心规则见下方说明：

<!DOCTYPE html>

<script src="https://code.jquery.com/jquery-3.6.1.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script>
setTimeout(() => {      //"setTimeout()" runs only once! (Ensures that all required scripts are already loaded, especially when injecting this code in browsers!)
    $(document).ready(function() {
    $( "[Resize]" ).resizable({aspectRatio: true});
    $( "[Drag-Move]" ).draggable();
    });
}, "1000");     //1000 milliseconds = 1 second
</script>

<div style="text-align:center; border:2px solid red; display:inline-block; color:red; overflow:hidden;"  Resize Drag-Move>
    <div style="border:2px solid green; display:inline-block;" Drag-Move>
    <img width="50"  src="https://i.imgur.com/FHjzFv3.jpg" Resize>
    </div>
<p>Wonder Boss</p>
</div>

<div style="text-align:center; border:2px solid red; display:inline-block; color:red; overflow:hidden;"  Resize Drag-Move>
<img width="50"  src="https://i.imgur.com/FHjzFv3.jpg"  Resize Drag-Move>
<p>Wonder Boss</p>
</div>

核心规则 #

• 必须用inline-block类型的div包裹图片，才能保留图片原始居中位置
• Resize属性需绑定在img标签上，而非外层包裹div
• Drag-Move属性需绑定在包裹div上，而非img标签
• 示例中两张图片及容器均支持缩放和移动，但仅第一张符合预期效果

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