Question

I’m having a problem where sorting using jQuery UI Sortable fails when one of the lists is collapsed with slideToggle.

Here’s a demo:
http://jsfiddle.net/BNJzB/52/

Instructions: Collapse second list, drag item from the first to the third list, and then try to drag an item from the third list to the first list.

Some strange things I’ve noticed:

• The dragging and dropping will work if all the lists are expanded
• The success rate of the dragging and dropping is based on the scroll position of the window

I’ve seen this in the latest Chrome and Firefox, but I haven’t tested IE yet.

Answer 1

The dragged elements from 3 to 1 are being dumped into 2.

This might not be an ideal solution, but if you disable dropping on collapsed lists, it works fine. Update your click handler like so (also you shouldn’t be using .live!)

$weekday.live('click', function() {
    var $this = $(this), // store the header/trigger
        $list = $this.next('ul'); // store the list

    $this.toggleClass('open').next('ul').slideToggle().toggleClass('closed');

    if ($this.hasClass('open')) { // if the header has the 'open' class, it is being toggled off
        // remove sortable functionality
        $list.sortable('disable');            
    } else {
        $list.sortable('enable');           
    }
});​

Check it out here: http://jsfiddle.net/BNJzB/57/