CODEWITHSUNDEEP
jquery-uijquery-ui-sortable
dennismonsewicz
dennismonsewicz

Reputation: 25552

jQuery UI Sortable stop event after drag and drop

I am working with the jQuery UI Sortable plugin and everything works as expected accept for one issue. After I am done dragging an item to reorder the list (a list of <A> tags) the click event fires after the drop is done.

Anyone run into this issue before? If so, how did you go about fixing it?

Upvotes: 8

Views: 26217

Answers (3)

Lo&#239;c BRIED
Lo&#239;c BRIED

Reputation: 11

$(thumbOpts.container).sortable({
        items: '.page',
        revert: true,
        opacity: 0.5,
        start: function(evt, ui) {
            ui.item.find('a').one('click', function(){return false;});
        },
});

Upvotes: 0

vatavale
vatavale

Reputation: 1620

Just add option for sortable:

helper : 'clone'

It will prevent click event for source element and don't change anyhow UX.

See doc for "helper".

Upvotes: 2

dennismonsewicz
dennismonsewicz

Reputation: 25552

Ok... I figured it out..

Here is my solution:

$(thumbOpts.container).sortable({
        items: '.page',
        revert: true,
        opacity: 0.5,
        start: function(evt, ui) {
            var link = ui.item.find('a');
            link.data('click-event', link.attr('onclick'));
            link.attr('onclick', '');
        },
        stop: function(evt, ui) {
            setTimeout(
                function(){
                    var link = ui.item.find('a');
                    link.attr('onclick', link.data('click-event'));
                },
                    200
            )
        }
    });

Upvotes: 10

Related Questions