拖放后的jQuery UI Sortable停止事件答案

【问题标题】：jQuery UI Sortable stop event after drag and drop拖放后的jQuery UI Sortable停止事件
【发布时间】：2012-03-18 07:22:45
【问题描述】：

我正在使用 jQuery UI 可排序插件，并且一切都按预期工作，接受一个问题。在我完成拖动项目以重新排序列表（<A> 标签列表）后，单击事件会在放置完成后触发。

以前有人遇到过这个问题吗？如果是这样，您是如何解决的？

【问题讨论】：

你能在jsfiddle 中构建重现你的问题的测试用例吗？
你确定是点击事件吗？在放置完成后还会触发一些其他事件（最常见的可能是“更改”事件）。如果您向我们展示您的代码，可能会提供更好的答案。
也许这会有所帮助，因为看起来这就是您遇到的问题：stackoverflow.com/a/1771635/37140
这是一个 jsFiddle - jsfiddle.net/dennismonsewicz/5VgSq
我也在与 iviewer 合作，这可能会导致问题...@ChrisMitchell - 我尝试了你的建议，但没有运气:(

标签： jquery-ui jquery-ui-sortable

【解决方案1】：

好吧...我想通了..

这是我的解决方案：

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

【讨论】：

好的 +1，但您不认为应该存在更清洁的解决方案吗？
排序过程中是否有事件发生？像可拖动的东西（拖动时）？

【解决方案2】：

只需添加可排序选项：

helper : 'clone'

它将阻止源元素的点击事件，并且无论如何都不会改变用户体验。

见doc for "helper"。

【讨论】：

【解决方案3】：

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

【讨论】：