javascript - Resize parent element when inner one is dragged. (jqueryUI draggable) -

When the #right element is drawn, Parents want to change shape My example works incorrectly and I have failed to understand why any signal to fix it?

Just in case, what I'm trying to do here is to make a resizable scroll similar to that. But for now, I'm just interested in the right element.

The simplest solution is as follows (note # left and #right changes in SCSS):

SCSS:

  # container {width: 500px; Height: 100 pixels; Background: #F9F9F9; } # Nav {width: 100px; Height: 100 pixels; Background: # E9799; Cursor: move; } #left {width: 10px; Height: 100 pixels; Status: Completed; Top: 0; Left: 0px; Background: # A9A9A9; Cursor: W-resize; & Amp ;: Hover {background: # 999; }} #wright {width: 10px; Height: 100 pixels; Status: Completed; Top: 0; Correct: 0px; Background: # A9A9A9; Cursor: changing the e-shape; & Amp ;: Hover {background: # 999; }}   
 Javascript:  
  var cont = $ ("# container") var nav = $ ("# nav") var left = $ ( "# Left") var correct = $ ("# right") nav.draggable ({prevention: cont}); Right.draggable ({prevention: cont, drag: function (e, ui) {nav.width (ui.position.left);}});   
 The only problem was that you were getting very fancy with your javascript. All the information you needed in Ui.position.left was what I did, the content was changed from floating to position: absolute;