javascript jQuery Sortable - 取消和恢复无法按预期工作

jQuery Sortable - cancel and revert not working as expected

提问by Richard

Problem (jsFiddle demo of the problem)

问题（问题的jsFiddle演示）

I'm having some trouble with the revertsetting when used in conjunction with the cancelmethod in the jQuery sortable. The cancel method, as documented in the jQuery Sortable documentationstates:

revert当与canceljQuery sortable 中的方法结合使用时，我在设置方面遇到了一些问题。取消方法，如jQuery Sortable 文档中所述：

Cancels a change in the current sortable and reverts it back to how it was before the current sort started. Useful in the stop and receive callback functions.

取消当前可排序的更改并将其恢复到当前排序开始之前的状态。在停止和接收回调函数中很有用。

This works fine in both the stopand receivecallbacks, however if I add a revertdurationto the sortable connected list, it starts to act funny (see jsFiddle here).

这在stop和receive回调中都可以正常工作，但是如果我向可排序的连接列表添加revert持续时间，它就会开始变得有趣（请参阅此处的 jsFiddle）。

Ideally, upon cancelling, the revertcould simply not happen, or alternatively in a more ideal world, it would gracefully revert to it's original location. Any ideas how I can get the revertand cancelto play nice?

理想情况下，取消后，这revert可能根本不会发生，或者在更理想的世界中，它会优雅地恢复到其原始位置。任何想法如何，我可以得到revert和cancel发挥好？

Expected

预期的

1. Drag from left list to right list
2. Drop item
3. Item animates to originallocation - or -immediately shifts to original location

1. 从左列表拖到右列表
2. 掉落物品
3. 项目动画到原始位置- 或 -立即转移到原始位置

Actual

实际的

1. Drag from left list to right list
2. Drop item
3. Item animates to newlocation, assuming sortable is successful
4. Item immediately shifts to original location, as sortable was cancelled

1. 从左列表拖到右列表
2. 掉落物品
3. 项目动画到新位置，假设 sortable 成功
4. 项目立即转移到原始位置，因为 sortable 被取消

Clarification

澄清

The revertproperty moves the item to the location where the item would drop if successful, and then immediately shifts back to the original location due to the revertoccurring before the cancelmethod. Is there a way to alter the life-cycle so if the cancelmethod is executed, revertisn't, and instead the item is immediately return to it's original location?

revert如果成功，该属性将项目移动到项目将掉落的位置，然后由于方法revert之前发生的原因立即移回原始位置cancel。有没有办法改变生命周期，所以如果cancel方法被执行，revert不是，而是项目立即返回到它的原始位置？

采纳答案by Richard

After many hours for searching for a solution I decided the only way to achieve what I was trying to do was to amend the way in which the jQuery sortable plugin registered the revert time. The aim was to allow for the revertproperty to not only accept a booleanor integer, but also accept a function. This was achieved by hooking into the prototypeon the ui.sortablewith quite a lot of ease, and looks something like this.

经过数小时寻找解决方案后，我决定实现我想要做的唯一方法是修改 jQuery 可排序插件注册恢复时间的方式。目的是允许revert属性不仅接受 aboolean或integer，还接受 a function。这是通过挂钩到实现prototype上ui.sortable有相当多的缓解，并且看起来是这样的。

jQuery Sortable Hotfix

jQuery 可排序修补程序

$.ui.sortable.prototype._mouseStop = function(event, noPropagation)
{
    if (!event) return;

    // if we are using droppables, inform the manager about the drop
    if ($.ui.ddmanager && !this.options.dropBehaviour)
        $.ui.ddmanager.drop(this, event);

    if (this.options.revert)
    {
        var self = this;
        var cur = self.placeholder.offset();

        // the dur[ation] will not determine how long the revert animation is
        var dur = $.isFunction(this.options.revert) ? this.options.revert.apply(this.element[0], [event, self._uiHash(this)]) : this.options.revert;

        self.reverting = true;

        $(this.helper).animate({
            left: cur.left - this.offset.parent.left - self.margins.left + (this.offsetParent[0] == document.body ? 0 : this.offsetParent[0].scrollLeft),
            top: cur.top - this.offset.parent.top - self.margins.top + (this.offsetParent[0] == document.body ? 0 : this.offsetParent[0].scrollTop)
        }, !isNaN(dur) ? dur : 500, function ()
        {
            self._clear(event);
        });
    } else
    {
        this._clear(event, noPropagation);
    }

    return false;
}

Implementation

执行

$('ul').sortable({
    revert: function(ev, ui)
    {
        // do something here?
        return 10;
    }
});

回答by chrisvillanueva

i created a demo for you here:

我在这里为您创建了一个演示：

the jsfiddle code

jsfiddle 代码

it seems to produce the output you expect.

它似乎产生了您期望的输出。

i changed the receive callback method from this:

我从此更改了接收回调方法：

$(ui.sender).sortable('cancel');

to this:

对此：

$(ui.sender).sortable( "option", "revert", false );

hopefully, this is what you expected.

希望这是您所期望的。

回答by user3121359

I ended up creating a new event called beforeRevert which should return true or false. If false then the cancel function is called and the item is animated back to its original position. I didn't code this with the helper option in mind, so it would probably need some additional work to support that.

我最终创建了一个名为 beforeRevert 的新事件，它应该返回 true 或 false。如果为 false，则调用取消函数并将项目动画返回到其原始位置。我在编写代码时没有考虑到 helper 选项，因此可能需要一些额外的工作来支持它。

jQuery Sortable Hotfix with animation

带有动画的 jQuery Sortable Hotfix

var _mouseStop = $.ui.sortable.prototype._mouseStop;
$.ui.sortable.prototype._mouseStop = function(event, noPropagation) {
  var options = this.options;
  var $item = $(this.currentItem);
  var el = this.element[0];
  var ui = this._uiHash(this);
  var current = $item.css(['top', 'left', 'position', 'width', 'height']);
  var cancel = $.isFunction(options.beforeRevert) && !options.beforeRevert.call(el, event, ui);

  if (cancel) {
    this.cancel();
    $item.css(current);
    $item.animate(this.originalPosition, {
      duration: isNaN(options.revert) ? 500 : options.revert,
      always: function() {
        $('body').css('cursor', '');
        $item.css({position: '', top: '', left: '', width: '', height: '', 'z-index': ''});
        if ($.isFunction(options.update)) {
          options.update.call(el, event, ui);
        }
      }
    });
  }

  return !cancel && _mouseStop.call(this, event, noPropagation);
};

Implementation

执行

$('ul').sortable({
  revert: true,
  beforeRevert: function(e, ui) {
    return $(ui.item).hasClass('someClass');
  }
});