拖動內部元素時，調整父元素的大小。 （jqueryUI可拖動）

Question

jsfiddle示例

拖動#right元素后，我想調整其父元素的大小。 我的示例無法正常工作，我無法理解原因。 有任何提示如何解決？

為了以防萬一，我在這里要做的是創建一個可調整大小的滾動條，類似於此滾動條。 但是目前，我只對正確的元素感興趣。

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具有您需要的所有信息。 我所做的就是將內容從浮動更改為位置：絕對；

Answer 2

您可以使用優質的純JavaScript來做到這一點
http://jsfiddle.net/DerekL/cCvGD/

var oriX = 0,
    oriW = 0,
    mousedown = false;
right.mousedown(function (e) {
    oriX = $(this).offset().left;             //store the initial x and width
    oriW = nav.width();
    mousedown = true;                         //mousedown sets to true
    e.stopPropagation();                      //prevent nav from being dragged
})
$(window).mousemove(function (e) {
    if(mousedown == true) {                   //only when mouse is down (dragging)
        nav.width(oriW + (e.clientX - oriX)); //calculate the width
    }
}).mouseup(function () {
    mousedown = false;                        //mousedown sets to false
});

左右兩邊： http : //jsfiddle.net/DerekL/cCvGD/1/

Answer 3

問題是您正在更改導航容器的寬度，而這正移出正確的元素。 因此，當您拖動它時，它會移動兩倍。

您可以通過在dragable方法中重置右側元素的位置來解決此問題

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

看到： http : //jsfiddle.net/vf4eS