Home/ Questions/Q 6251013
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T13:32:07+00:00

My page has several items (divs) that are draggable and resizable. My code for

  • 0

My page has several items (divs) that are draggable and resizable.
My code for doing this is given below:

part.draggable(
                     {
                                containment: 'parent',
                                drag: function(event, ui){
                                partIsDragging = true
                                part.prev().css('top', ui.position.top - 20 ).css('left', ui.position.left )
                                part.prev().show()
                           },
                                stop: function(event, ui) {
                                         partIsDragging = false
                            }
                              }).resizable({
                                 containment: 'parent',
                                 handles: 'ne, se, sw, nw,n,w,e,s',
                                 stop: function() {
                                            }                                        
                              });

The html structure for these is the following:

<body>
<div id="wrapper">
    <div class="draggableItem"></div>
    <div class="draggableItem"></div>
    <div class="draggableItem"></div>
    <div class="draggableItem"></div>
</div>
</body>

In my css files i have set body height: 100% and wrapper height: 100%. Width is always fixed for wrapper, width: 950px. I want my div to expand in height when the draggableItem reaches the bottom of the wrapper. Right now when the page is loaded, it has the height as big as the resolution allows it but in case I have more items in the wrapper then everything becomes cluttered and I would like when dragging an item to somehow expand the wrapper in height dynamically. This should happen only if I hit the bottom border.

PS: I am using jQuery and jQuery-ui.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I may have a solution. First off, I replaced part with '.draggableItem' and this where appropriate. Please tell me if that breaks the code in some critical way. In addition, I removed part.prev().css('top', ui.position.top - 20 ).css('left', ui.position.left ) in the code below.

    function adjustWrapperHeight(movingObject)
{
    var objectBottomPosition = $(movingObject).offset().top+$(movingObject).height()
    var wrapperBottomPosition = $("#wrapper").offset().top+$("#wrapper").height()
    if(wrapperBottomPosition-objectBottomPosition<distanceBuffer)
    {
        $("#wrapper").height($("#wrapper").height()+distanceBuffer+1)
    }
}

var distanceBuffer = 20;
$('.draggableItem').draggable(
        {
            containment: 'parent',
            drag: function(event, ui)
            {
                partIsDragging = true
                adjustWrapperHeight(this)
            },
            stop: function(event, ui)
            {
                partIsDragging = false
            }
        }).resizable(
        {
             handles: 'ne, se, sw, nw,n,w,e,s',
             resize: function(event, ui)
             {
                adjustWrapperHeight(this)
                var objectRightPosition = $(this).offset().left+$(this).width()
                var wrapperRightPosition = $("#wrapper").offset().left+$("#wrapper").width()
                if(wrapperRightPosition<=objectRightPosition)
                {
                    $(this).width(ui.originalSize.width)
                    var containmentLeftPosition = wrapperRightPosition-$(this).width()
                    $(this).offset({top:$(this).offset().top,left:containmentLeftPosition})
                }
             }                                    
         })
        })

    The function adjustWrapperHeight(movingObject) adjusts div#wrapper‘s height depending on a movingObject‘s bottom position. That is, when movingObject “pushes up” against div#wrapper‘s borders, it adjusts div#wrapper‘s height.

    I had to use a hack for resizable. The containment: 'parent' for resizable (but not draggable) sets the containment to the container’s ORIGINAL height or so it seems. That means as the height of div#wrapper dynamically changes, the constraint set by containment: 'parent' does not dynamically change. To fix this, I removed containment: 'parent' and indeed the entire containment and ensured that div#wrapper‘s right containment isn’t broken within the resize event. Note that you should probably do this with div#wrapper‘s left containment as well.

    Please tell me if this was helpful. Thank you.

    • 0