Question

Alright, so I have a strange problem with the Jquery sortable plugin. I am trying to make a series of lists inside an overflow-y:auto div. This works great when the lists are smaller then the container. However, as soon as the lists grow and the container’s overflow is working, the sortables not longer really work. They do not scroll down as the user drags down the list.

Does anyone know how to attach the scroll or drag event to the container? I have tried setting the sortable on the container and making the children handles, but that does not trigger the “receive” event, which I need. Plus the scroll event is still not working properly.

Here is how my plugin is initialized:

$('.sort-list').sortable({
        'connectWith': '.item-container',
        'items': ".item-wrapper:not(.main-item)",
        'containment': '.canvas',
        'placeholder' : "ui-state-highlight",
        'scroll' : true,
        'opacity' : 0.8,
        start: function (event, div) { 
            // set the placeholder size to the proper size
            $('.ui-state-highlight').css({
                'width':$(div.helper).outerWidth()-2,
                'height':$(div.helper).outerHeight()-2
            });             
        },
        receive: function(event, ui) {
            var interval = $(event.target).parent('.time-container').attr('interval');
            var oldInterval  = $(ui.sender).parent('.time-container').attr('interval');
            var item = $(ui.item).find('.item').data('objectData');
            self.updateInterval(oldInterval, interval, item);         
        }
    });

Does anyone have any insight into getting this behavior to work? I am really stumped here… Thanks.

Answer 1

So, I am answering this for the sake of all the people who are looking for a solution to this. Unfortunately, it’s not possible with the current Jquery UI sortable. I ended up creating a different behavior that didn’t rely on the sortable scrolling over lists. It basically involved a refrence to each list on the right, and dragging the items in the list to that to change the list they are located in. Hope that helps someone out. :/

Hopefully this will be something added soon…