Jquery ui draggable - auto resize parent shell

Question

I'm sorry my English is not so good. I would like my container element to resize to always contain its children.

Visit jsfiddle.net/datakolay/LakYy/

$(document).ready(function() { var $document = $(document), $parent = $("#parent"), $container = $(".container", $parent), offset = $container.offset(), scrollbarSafety = 15; $container.height($document.height() - offset.top - scrollbarSafety); $("#eleman,#eleman2") .draggable( { containment: $container, drag: function(event, ui) { var $draggee = $(this), draggeePosition = $draggee.position(), shouldHeight = draggeePosition.top + $draggee.height() + 15; if($parent.height() < shouldHeight) { $parent.height(shouldHeight); } if($parent.height() > shouldHeight) { $parent.height(shouldHeight); } } } ); }); 

Answer 1

http://jsfiddle.net/LakYy/5/

 $(document).ready(function() { var $document = $(document), $parent = $("#parent"), $container = $(".container", $parent), offset = $container.offset(), scrollbarSafety = 15; $container.height($document.height() - offset.top - scrollbarSafety); $("#eleman,#eleman2") .draggable( { containment: $container, drag: function(event, ui) { var shouldHeight = getdraggablemaxheight(); if($parent.height() < shouldHeight) { $parent.height(shouldHeight); } if($parent.height() > shouldHeight) { $parent.height(shouldHeight); } } } ); }); function getdraggablemaxheight() { var $parent = $("#parent"), $container = $(".container", $parent), maxheight = 0, currentheight = 0, currentposition; $container.children().each(function(index, element) { currentposition = $(element).position(); currentheight = currentposition.top + + $(element).height() + 15; if(currentheight > maxheight) maxheight = currentheight; }); return maxheight; 

Answer 2

You can use the following to figure out shouldHeight - essentially:

• use selector to get all draggable objects
• Get its height and compare it to what you currently have.
• Set the height.

Here is the meat, like:

  var shouldHeight = 0; $(".ui-draggable").each(function () { var draggeePosition = $(this).position(); if (shouldHeight < draggeePosition.top + $(this).height() + 15) { shouldHeight = draggeePosition.top + $(this).height() + 15; } }); 

script: http://jsfiddle.net/LakYy/3/

Answer 3

Based on @caspian's solution, you may find that this option scales better with many draggable objects. The same is true, but only finds dom positions in one element:

  $(".ui-draggable").each(function () { var draggeeHeight = $(this).position().top + $(this).height() + 15; if (shouldHeight < draggeeHeight) { shouldHeight = draggeeHeight; }; }); if ($parent.height() != shouldHeight) { $parent.height(shouldHeight); } 

I also needed this for the project, here is the fiddle http://jsfiddle.net/genkilabs/WCw8E/2/

In @coding_idiot what you are asking for will be the default behavior if you use overflow-x: scroll;