Search code examples
javascriptjquerycssdraggable

Autoresize parent container with drag and drop

I have three containers which are automatically resized when inner div is resized. Now I want to add drag feature to my code and keep the container auto-resize option like it is in my example. How to do this?

I have found several examples but none of those is working with multiple containers.

$(function(){
    $('.inner').resizable({
    });

  /* This is not working
      $('.inner').draggable({
    });

    */



});

Jsfiddle

Solution

  • Bind events in the same selector.

    $('.inner').resizable({}).draggable({});

    See in your edited fiddle.

    EDIT:

    Use the containment: parent option on both divs to constraint movement like in this one.

    EDIT 2:

    This should solve your problem. A callback function to control outer div height is called on resize.

    EDIT 3:

    This last fiddle should match all you request. I took your fiddle in comment and edited it.