Geek Answers Handbook

Resize the parent when the inner is dragged. (jqueryUI draggable)

Jsfiddle example

When the #right element #right dragged, I want to change its parent element. My example does not work correctly, and I do not understand why. Any tips on how to fix this?

Just in case, what I'm trying to do here, I need to create a resizable scroll size, like this one . But at the moment I am only interested in the correct element.

+4
source share
3 answers

The simplest solution is as follows (note the changes to #left and #right in 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); } });

The only problem was that you were thinking too much about your JavaScript. Ui.position.left had all the necessary information. All I did was change the contents from floating position to position: absolute;

+3
source

You can use pure "pure" JavaScript to do this.
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 });

Both left and right: http://jsfiddle.net/DerekL/cCvGD/1/

+2
source

The problem is that you are changing the width of your nav container and this is moving the right element. Therefore, while you drag it, it moves twice.

You can get around this by dropping the location of your right item in drag mode

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

see http://jsfiddle.net/vf4eS

+1
source

More articles:


All Articles