javascript - 拖动内部元素时调整父元素的大小。 (jqueryUI 可拖动)

Question

jsfiddle example

当拖动 #right 元素时，我想调整其父元素的大小。我的示例工作不正确，我无法理解原因。有任何修复方法的提示吗？

以防万一，我在这里要做的是创建一个类似于 this one 的可调整大小的卷轴.但现在，我只对正确的元素感兴趣。

Answer 1

最简单的解决方案如下(注意 SCSS 中#left 和#right 的变化):

SCSS:

#container {
    width: 500px;
    height: 100px;
    background: #f9f9f9;
}

#nav {
    width: 100px;
    height: 100px;
    background: #e9e9e9;
    cursor: move;
}
#left {
    width: 10px;
    height: 100px;
    position: absolute;
    top:0;
    left:0px;
    background: #a9a9a9;
    cursor: w-resize;
    &:hover {
        background: #999;
    }
}
#right {
    width: 10px;
    height: 100px;
    position:absolute;
    top:0;
    right:0px;
    background: #a9a9a9;
    cursor: e-resize;
    &:hover {
        background: #999;
    }
}

JavaScript:

var cont = $("#container")
var nav = $("#nav")
var left = $("#left")
var right = $("#right")

nav.draggable({
    containment: cont
});

right.draggable({
    containment: cont,
    drag: function(e, ui) {
        nav.width(ui.position.left);
    }
});

唯一的问题是您对 JavaScript 过于痴迷。 ui.position.left 包含您需要的所有信息。我所做的只是将内容从 float 更改为position:absolute；