jQuery UI Sortable stop event after drag and drop

Question

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?

Smoko

Can you build test case reproducing your problem in jsfiddle ? – Wellhead

Are you sure it's the click event? There are a few other events that fire after a drop is done (the most common might be the "change" event). Might be able to supply a better answer if you show us your code. – Adaptive

Perhaps this will help as it seems like this is what you are running into: https://mcmap.net/q/237743/-preventing-click-event-with-jquery-drag-and-drop – Annis

Here is a jsFiddle - jsfiddle.net/dennismonsewicz/5VgSq – Smoko

I am also working with iviewer which might be causing the issue... @ChrisMitchell - I tried your suggestion, but no luck :( – Smoko

Answer 1

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
            )
        }
    });

Smoko

Ok +1, but don't you think a cleaner solutions should exist? – Hoye

is there event when sorting is in progress? Something like draggable (when dragging)? – Ariosto

Answer 2

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".

Illustrator

Answer 3

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

Rogation