拖动内部元素时调整父元素的大小。 （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