Question

I’m using jQuery UI “sortable” plugin to be able to select and sort items.

I set up the plugin to have two lists, one for “available” items, the second for “selected” items.

The plugin works as expected, I can move items from one list to the other.

However, when I remove one item from the list, the height of the list is lowered. Is there any way to fix it?

In fact, i’d like to set the outer border of both list to the initial height of the left items (at the beginning, all items are in the first list)

This picture describe what I want to do:

The red lines are what I’d like. I want both lists to have this size, fixed.

Here is my code (generated from an asp.net webpage actually) :

<script type="text/javascript">
    $(function () {
        $("#sourceItems").sortable({
            connectWith: "#targetItems",
            update: function (event, ui) {
                $("#selectedUserIDs").val(
                    $("#targetItems").sortable('toArray')
                    );
            },
            placeholder: "ui-state-highlight"
        });
        $("#targetItems").sortable({
            connectWith: "#sourceItems",
            placeholder: "ui-state-highlight"
        });

        $("#sourceItems, #targetItems").disableSelection();
    });
</script>
<style type="text/css">
#sourceItems, #targetItems { list-style-type: none; margin: 0; padding: 0; margin-right: 10px; background: #eee; padding: 5px; width: 230px; border:solid 1px black; }
#sourceItems li, #targetItems li { margin: 5px; padding: 5px; width: 200px; height: 12px; }
</style>
<div style="float: left; display: inline-block; width:fill-available">
    <p>Available :</p>
    <ul id="sourceItems" class="droptrue">
        <li class="ui-state-default" id='i1'>item1</li>        
        <li class="ui-state-default" id='i32'>item2</li>        
        <li class="ui-state-default" id='i47'>item3</li>        
        <li class="ui-state-default" id='i46'>item4</li>
    </ul>
</div>

<div style="float: left; display: inline-block;">
    <p>Selected :</p>
    <ul id="targetItems" class="droptrue">
    </ul>
</div>
<div style="display: none">
    <input name="selectedUserIDs" type="text" id="selectedUserIDs" />
</div>

The hidden input field is my container for storing selected items (posted with the form).

I’ve tried by adding .height($("#sourceItems).outerHeight()); to both lists, but this does not works.

Answer 1

Edit:

$(document).ready(function(){
    $("#targetItems").height($("#sourceItems").height());
    $("#sourceItems").height($("#sourceItems").height());
});

http://jsfiddle.net/JEY4U/1/

Old Answer:

Use a ‘helper’ function, which makes sure the dragged elements have proper width and height.
Something like this:

helper: function(event, ui) {
    $(ui).width($(ui).width());
    $(ui).height($(ui).height());
    ui.children().each(function() {
        $(this).width($(this).width());
    });
    return ui;
}

You use it like this:

$(SOME_OBJECT).sortable({
    connectWith: ...,
    placeholder: ...,
    ......
    helper: function....
});

Of course you can write any costume helper function you’d like.