Jquery 左可调整大小的句柄 (e) 问题

Question

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

怎么了？非常感谢任何帮助，谢谢...


    
    
    
    
        
        
        
            body {
                margin: 50px;
            }
    
            .row {
                width: 900px;
                height: auto;
            }
    
            .col {
                position: relative;
                min-height: 331px;
                height: 331px;
                width: 33.333%;
                background: #ccc;
            }
    
            .handle-w,
            .handle-e {
                background: #fff;
                border: 2px solid #00a0d2;
                border-radius: 50%;
                height: 12px;
                width: 12px;
                cursor: e-resize;
                top: 50%;
                transform: translateY(-50%);
                position: absolute;
            }
    
            .handle-w {
                left: -7px;
            }
    
            .handle-e {
                right: -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/

Answer 1

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

$(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'
    });
});

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

jQuery Resize On Both Sides

Jquery 左可调整大小的句柄 (e) 问题

Jquery Resizable Handle Left (e) Issue

javascript

jquery

jquery-ui