jQuery Sortable - 取消并恢复不按预期工作

Question

问题(问题的jsFiddle演示)

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

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

这在stop和receive回调中都可以正常工作,但是如果我在可排序的连接列表中添加一个revert 持续时间,它就会开始变得有趣(参见jsFiddle here).

理想情况下,在取消时,revert可能根本不会发生,或者在更理想的世界中,它会优雅地恢复到它的原始位置.任何想法我怎么能得到revert和cancel发挥好？

预期

1. 从左侧列表拖动到右侧列表
2. 删除项目
3. 项目动画到原始位置- 或 -立即转移到原始位置

实际

1. 从左侧列表拖动到右侧列表
2. 删除项目
3. 项目动画到新位置,假设可排序成功
4. 项目立即转移到原始位置,因为可排序被取消

澄清

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

Answer 1

我在这里为你创建了一个演示:

jsfiddle代码

它似乎产生了你期望的输出.

我改变了接收回调方法:

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

对此:

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

希望这是你所期望的.

Answer 2

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

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

履行

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