Jquery Resizable Handle Left (e) 问题答案

【问题标题】：Jquery Resizable Handle Left (e) IssueJquery Resizable Handle Left (e) 问题
【发布时间】：2022-01-22 04:53:56
【问题描述】：

我有以下示例代码，它们将 jQuery Resizable 用于 e、w 句柄。我可以看到“e”句柄按预期工作，但“w”总是改变“e”宽度。

怎么了？非常感谢您的帮助，谢谢...

身体 { 边距：50px； } 。排 { 宽度：900px；高度：自动； } .col { 位置：相对；最小高度：331px；高度：331px；宽度：33.333%；背景：#ccc； } .handle-w, .handle-e { 背景：#fff; 边框：2px 实心#00a0d2；边界半径：50%；高度：12px；宽度：12px；光标：电子调整大小；最高：50%；变换：translateY（-50%）；位置：绝对； } .handle-w { 左：-7px； } .handle-e { 右：-7px； }

</head>

<body>
    <div class="row">
        <div class="col">
            <div class="handle-w"></div>
            <div class="handle-e"></div>
        </div>
    </div>

    <script src="external/jquery/jquery.js"></script>
    <script src="jquery-ui.js"></script>
    <script>
        $(document).ready(function () {

            var col = $('.col');

            col.resizable({
                containment: col.closest('.row'),
                handles: {
                    'w': col.find('.handle-w'),
                    'e': col.find('.handle-e')
                },
            });

        });
    </script>
</body>

</html>

或者您可以在 jsfiddle 中查看现场演示 https://jsfiddle.net/yhutxfvr/

【问题讨论】：

标签： javascript jquery jquery-ui

【解决方案1】：

解决此问题的简单方法是按如下方式设置handles 属性：

$(document).ready(function () {
    var col = $('.col');

    col.resizable({
        /* Added the following line of code. */
        aspectRaitio: true,

        containment: col.closest('.row'),

        /* The following line of code has been changed. */
        handles: 'n, e, s, w'
    });
});

此外，我建议您查看以下帖子。讨论了类似但非同义的问题：

【讨论】：

感谢您的回答，顺便说一句，您的解决方案是有效的，但问题是如何使用自定义句柄，就像您在我上面的代码中看到的 'w': col.find('.handle-w') 所以只有当用户在左侧使用蓝色圆圈时才能调整大小/对，不只用handles: 'e, w'？
是的，这是我注意到的一个问题；也许这是一个让事情变得更容易的功能。
如果你仔细看我回答中的图片，我没有触摸圆圈；为了清楚起见，我从圆圈的底部拿着它来截取屏幕截图。 :)