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?

Can you build test case reproducing your problem in [jsfiddle](http://www.jsfiddle.net) ? — Didier Ghys, Feb 28 '12 at 19:33
Perhaps this will help as it seems like this is what you are running into: http://stackoverflow.com/a/1771635/37140 — flowy, Feb 28 '12 at 19:38
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. — Matt, Feb 28 '12 at 19:35
Here is a jsFiddle - http://jsfiddle.net/dennismonsewicz/5VgSq/ — dennismonsewicz, Feb 28 '12 at 20:28
I am also working with iviewer which might be causing the issue... @ChrisMitchell - I tried your suggestion, but no luck :( — dennismonsewicz, Feb 28 '12 at 20:29

score 10 · Accepted Answer · answered Feb 28 '12 at 20:39

10

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

answered Feb 28 '12 at 20:39

dennismonsewicz

25,132
33
116
189

3

Ok +1, but don't you think a cleaner solutions should exist? – jjmontes Nov 28 '12 at 14:49
is there event when sorting is in progress? Something like draggable (when dragging)? – FrenkyB Feb 15 '18 at 14:33

score 1 · Answer 2 · answered Nov 27 '15 at 07:10

1

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

answered Nov 27 '15 at 07:10

vatavale

1,470
22
31

score 0 · Answer 3 · edited Feb 01 '21 at 16:01

0

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

edited Feb 01 '21 at 16:01

gehbiszumeis

3,525
4
24
41

answered Feb 01 '21 at 10:25

Loïc BRIED

11
2

jQuery UI Sortable stop event after drag and drop

3 Answers3

Linked