Cambiar el tamaño del elemento padre cuando se arrastra el interno. (jqueryUI se puede arrastrar)

Ejemplo jsfiddle

Cuando se arrastra #right elemento #right , quiero cambiar el tamaño de su elemento principal. Mi ejemplo funciona incorrectamente y no estoy entendiendo por qué. ¿Alguna pista sobre cómo solucionarlo?

Por las dudas, lo que estoy tratando de hacer aquí es crear un desplazamiento networkingimensionable similar a este . Pero por ahora, solo estoy interesado en el elemento correcto.

La solución más simple es la siguiente (observe los cambios #left y #right en SCSS):

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); } }); 

El único problema era que te estabas volviendo demasiado elegante con tu JavaScript. El ui.position.left tenía toda la información que necesitabas. Todo lo que hice fue cambiar el contenido de la position flotante a la absoluta;

Puedes usar el buen JavaScript puro para hacer eso
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 }); 

Tanto a la izquierda como a la derecha: http://jsfiddle.net/DerekL/cCvGD/1/

El problema es que estás cambiando el ancho de tu contenedor de navigation , y esto está moviendo el elemento correcto . Entonces, mientras lo arrastras, se mueve dos veces más lejos.

Puede get esto al restablecer la location de su elemento correcto en el método dragable

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

ver: http://jsfiddle.net/vf4eS