Question

I found this code in one of the other questions on here. It’s exactly what i’m looking for (draggable and it neatly stacks the divs based on which one was clicked last) except I also want the div ids to be resizable but I can’t figure out how to do it without messing the code up.

http://jsfiddle.net/LQ4JT/7/

$(document).ready(function() {
    var a = 3;
    $('#box1,#box2,#box3,#box4').draggable({
        start: function(event, ui) { $(this).css("z-index", a++); }
    });
    $('#dragZone div').click(function() {
        $(this).addClass('top').removeClass('bottom');
        $(this).siblings().removeClass('top').addClass('bottom');
        $(this).css("z-index", a++);

    });
});​

Answer 1

Simply call .resizable() and they become resizable.

$('#box1,#box2,#box3,#box4').draggable({
   start: function(event, ui) { $(this).css("z-index", a++); }
}).resizable();

The reason you don’t see it: in jsFiddle, jQuery UI is included without a theme. If you inspect the boxes, you can see that they have the ui-resizable class and also have the resizing handles inside them, like this one:

<div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 1001; "></div>

, but they are not styled at all. They are invisible. If you give them dimensions, you will be able to drag them and resize the boxes.

Here is a simple demo that shows what I’m talking about.

These are the things I have changed:

• added .ui-resizable-se { width: 20px; height: 20px; background: cyan; position: absolute; bottom: 0; right: 0; } to the CSS, this will style the south-east handler.

• added the .resizable() call

• changed this selector: '#dragZone div' to '#dragZone > div' so it does not mess up the handlers and is only applied to the real boxes, not every div in the zone