CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-ui-sortable
Bret P.
Bret P.

Reputation: 13

jQuery UI Sortable Connected List - Over event not fired when item is scrolled into new list

Trying to create similar sorting functionality that is comparable to an iPhone. I've noticed that sortable items are not immediately detected by a connected list when the item is "scrolled into" a connected list.

Take a look at this JSFiddle. You will notice that the over event is not fired immediately when a sortable item from the first list is scrolled into the second list. You have to first move the mouse around before the event is fired. This becomes an issue when you let go of the mouse before the event is fired, which keeps the item in the first list. Is this a jQuery bug? Is there any sort of work around?

Here is my javaScript:

$(function () {
$("#sortable1, #sortable2").sortable({
    connectWith: ".connectedSortable",
    over: function () {
        alert("Over");
    },
    start: function () {
        $("#wrapper").animate({
            'scrollLeft': '+=330px'
        });
    },
    scroll: false
}).disableSelection();

});

Please note that I do want to use the jquery ui sortable scroll option. The page should scroll to the correct location by itself.

Any help is greatly appreciated. Thanks!

Upvotes: 0

Views: 82

Answers (1)

Julien Grégoire
Julien Grégoire

Reputation: 17144

You can wait until your scroll animation and position the placeholder in the new sortable. Like this:

 start: function (e, ui) {
            var cur_helper = ui.placeholder
            $("#wrapper").animate({
                'scrollLeft': '+=330px',

            }, function () {
                //you place it before equivalent position in sortable1
                $('#sortable2 > li').eq(ui.item.index()).before(cur_helper)

            });
        },

Fiddle: https://jsfiddle.net/um9vggb1/2/

Upvotes: 0

Related Questions