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

Question

jsfiddle example

當#right元素被拖拽時，我想調整它的父元素大小。我的例子工作不正確，我沒有理解爲什麼。任何提示如何解決它？

爲了以防萬一，我在這裏要做的是創建一個類似於this one的可調整大小的滾動條。但現在，我只對正確的元素感興趣。

Answer 1

最簡單的解決方法如下（注意#left和在SCSS #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