Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 708
dennismonsewicz Avatar asked Feb 28 '12 19:02

dennismonsewicz


2 Answers

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
            )
        }
    });
like image 168
dennismonsewicz Avatar answered Oct 23 '22 20:10

dennismonsewicz


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

like image 45
vatavale Avatar answered Oct 23 '22 22:10

vatavale