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 ? — Didier Ghys
– Didier Ghys, Commented Feb 28, 2012 at 19:33
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
– Matt, Commented Feb 28, 2012 at 19:35
Perhaps this will help as it seems like this is what you are running into: stackoverflow.com/a/1771635/37140 — flowy
– flowy, Commented Feb 28, 2012 at 19:38
I am also working with iviewer which might be causing the issue... @ChrisMitchell - I tried your suggestion, but no luck :( — dennismonsewicz
– dennismonsewicz, Commented Feb 28, 2012 at 20:29

dennismonsewicz · Accepted Answer · 2012-02-28 20:39:06Z

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, 2012 at 20:39

dennismonsewicz

25.6k35 gold badges119 silver badges194 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jjmontes Over a year ago

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

FrenkyB Over a year ago

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

vatavale · Accepted Answer · 2015-11-27 07:10:30Z

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

answered Nov 27, 2015 at 7:10

vatavale

1,63023 silver badges34 bronze badges

Comments

gehbiszumeis · Accepted Answer · 2021-02-01 16:01:26Z

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 1, 2021 at 16:01

gehbiszumeis

3,7495 gold badges28 silver badges45 bronze badges

answered Feb 1, 2021 at 10:25

Loïc BRIED

212 bronze badges

Collectives™ on Stack Overflow

jQuery UI Sortable stop event after drag and drop

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related