Geek asks and answers

Drag and drop is sometimes not performed using jQuery UI Sortable in combination with the slideToggle method (with an example!)

I had a problem when sorting using jQuery UI Sortable sorting fails when one of the lists is collapsed using the slideToggle method.

Here is a demo: http://jsfiddle.net/BNJzB/52/

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

Some strange things that I noticed:

  • Drag and drop will work if all lists are expanded.
  • Drag and Drop Success Based on Window Scroll Position

I have seen this in recent versions of Chrome and Firefox, but I have not tested IE yet.

+3
source share
1 answer

Draggable items from 3 to 1 are reset to 2.

This may not be the ideal solution, but if you turn off the removal of collapsed lists, it works fine. Update your click handler (you shouldn't use it either .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');           
    }
});​

Have a look here: http://jsfiddle.net/BNJzB/57/

+1
source

More articles:


All Articles