Question

I’m expecting “sortout’ event to fire when the dragging portal leaves the column. The ‘sortover’ event fires as expected.. I’m not sure if this is the way it should work or jquery UI is broken.

Here is the demo code http://jsfiddle.net/kY7SV/6/ Drag all the portlets out of the column and it should collapse. Drag portlets over the collapsed column, and it should expand.

Help is appreciated

Edit for Merlyn the important bits:

<ul id="sm" class="sm">
    <li id=list1><div style="background-color:red">1</div>
        <div class="column" id='col1'>
            <div class="portlet">
                <div class="portlet-header">Feeds</div>
                <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
            </div>
            <div class="portlet">
                <div class="portlet-header">News</div>
                <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
            </div>
        </div>
    </li>
    <li id=list2><div style="background-color:yellow">2</div>
        <div class="column" id='col2'>
            <div class="portlet">
                <div class="portlet-header">Shopping</div>
                <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
            </div>
            <div class="portlet">
                <div class="portlet-header">Messages</div>
                <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
            </div>
        </div>
    </li>
    <li id=list3><div style="background-color:blue">3</div>
        <div class="column" id='col3'>
            <div class="portlet">
                <div class="portlet-header">Links</div>
                <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
            </div>
            <div class="portlet">
                <div class="portlet-header">iMAGES</div>
                <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
            </div>
        </div>
    </li>
</ul>
​
$(function() {
    $(".column").sortable({
        connectWith: ".column"
    });

    $(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all").find(".portlet-header").addClass("ui-widget-header ui-corner-all").prepend("<span class='ui-icon ui-icon-minusthick'></span>").end().find(".portlet-content");

    $(".portlet-header .ui-icon").click(function() {
        $(this).toggleClass("ui-icon-minusthick").toggleClass("ui-icon-plusthick");
        $(this).parents(".portlet:first").find(".portlet-content").toggle();
    });

    $(".column").disableSelection();

    $(".column").bind("sortremove", function(event, ui) {
        var listitem = $(this).parents('li');
        var cnt = $(this).children().length;
        if (cnt < 1) {
            $(listitem).css('maxWidth', '25px');
        }
    });

    $(".column").bind("sortover", function(event, ui) {
        var listitem = $(this).parents('li');
        $(listitem).css('maxWidth', '');
    });

    $(".column").bind("sortout", function(event, ui) {
        var listitem = $(this).parents('li');
        var cnt = $(this).children().length;
        if (cnt < 1) {
            $(listitem).css('maxWidth', '25px');
        }
    });

    $(".column").bind("sortreceive", function(event, ui) {
        var listitem = $(this).parents('li');
        $(listitem).css('maxWidth', '');
    });

});​

Answer 1

Problem

The problem is that you’re selecting the wrong items. The li always contains exactly two children: The text div, and the container div. It doesn’t directly contain your items.

ui.sender seems to give the source li directly, though. You could call $(ui.sender).children().count to get the count of the column you are dragging out of.

The child count during the out event will always be 1 or more while doing the drag, and only when the drop fires will the count be 0. This probably has to do with the timing of when the event fires, or the fact that it might leave some sort of placeholder element while doing the dragging.

Suggested Solution

I recommend rethinking the demo, at least in regards to the out event. It is tricky logic to determine when you’re still dragging and when you’ve finished dragging from inside that out event. It also is good UI design to leave a large drop-target while you’re dragging things around.

The remove and receive events have a much more obvious count. I’d stick with resizing on those events.

How I figured this out

I opened my javascript console (F12 in your browser), and inserted a console write statement inside the out event. On chrome, this is console.out(...item to log here...). I toyed around with the various objects available to me (this, event, ui), and checked the outerHTML on their various HTML element properties.

Once you figured out how to select the right element, a simple way to figure out the count part of the problem would be to update the text of an element with the current child count. Then you’d see it update in real-time, per-column. I was logging, and noticed it was permanently stuck at 2, which clued me in to the fact that the wrong element was selected.

Notes

I can’t figure out what all the properties on this are supposed to be, and they seemed to change over time. The documentation isn’t much help. If I knew more about javascript events (in general) that might have helped me figure it out 🙂