I made a sortable, resizable, draggable, with-clone portlet but when I resize it I run into a bug.

My script:

<script type="text/javascript"> 

$(function() {
    $('#column1').draggable({
        helper:'clone',
        connectToSortable:'#sort',
        handle:'.widget-head',
    });

    $('#sort').sortable({ 
        handle:'.widget-head',
        connectWith: "#sort",
        out: function (e,ui) {
            $("#sort").children().resizable({ axis: 'x',containment: 'parent',
                resize:
                function(event, ui) 
                {
                    ui.size.width = ui.originalSize.width;
                }
            });
        } 
    });
});

</script>

I made a sortable, resizable, draggable, with-clone portlet but when I resize it I run into a bug.

My script:

<script type="text/javascript"> 

$(function() {
    $('#column1').draggable({
        helper:'clone',
        connectToSortable:'#sort',
        handle:'.widget-head',
    });

    $('#sort').sortable({ 
        handle:'.widget-head',
        connectWith: "#sort",
        out: function (e,ui) {
            $("#sort").children().resizable({ axis: 'x',containment: 'parent',
                resize:
                function(event, ui) 
                {
                    ui.size.width = ui.originalSize.width;
                }
            });
        } 
    });
});

</script>

• javascript
• jquery
• draggable
• jquery-ui-sortable
• resizable

• here an execution jsfiddle/sika/69fpn – strawberry Commented Mar 10, 2011 at 16:31

1 Answer 1

I figured out that the problem was related to the styling and was able to fix it. The position changed to absolute every time I resized, so to handle that I'm using this:

$('#sort').sortable({ 
    handle:'.widget-head',
    connectWith: "#sort",
    out: function (e,ui) {
        $("#sort").children().resizable({
            axis: 'x',
            containment: 'parent',
            resize: function(event, ui)  {
                ui.size.width = ui.originalSize.width;
                (ui.helper).css({'position': '', 'top': '0px'});
            }
        });
    } 
});