jQuery Sortable-取消和还原未按预期工作 [英] jQuery Sortable - cancel and revert not working as expected

问题描述

当与jQuery sortable中的cancel方法一起使用时，我在revert设置上遇到了一些麻烦.如 jQuery Sortable文档所述，取消方法指出:

I'm having some trouble with the revert setting when used in conjunction with the cancel method in the jQuery sortable. The cancel method, as documented in the jQuery Sortable documentation states:

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

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.

这在stop和receive回调中都可以正常工作，但是，如果我将revert duration 添加到可排序的连接列表中，它将开始变得很有趣(请参阅此处为jsFiddle ).

This works fine in both the stop and receive callbacks, however if I add a revert duration to the sortable connected list, it starts to act funny (see jsFiddle here).

理想情况下，取消后revert根本不可能发生，或者在更理想的世界中，它会优雅地恢复到其原始位置.有什么想法可以让revert和cancel发挥得更好吗?

Ideally, upon cancelling, the revert could 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 revert and cancel to play nice?

1. 从左侧列表拖动到右侧列表
2. 放置物品
3. 物品动画到原始位置-或-会立即移动到原始位置

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

实际

1. 从左侧列表拖动到右侧列表
2. 放置物品
假设可排序成功，
3. 项目会动画到新位置
4. 由于可排序项已取消，商品立即移至原始位置

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

澄清

revert属性将项目移动到成功的位置，然后由于cancel方法之前发生的revert立即移回原始位置.有没有一种方法可以更改生命周期，因此如果执行cancel方法而不是revert，而该项目立即返回到其原始位置?

Clarification

The revert property 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 revert occurring before the cancel method. Is there a way to alter the life-cycle so if the cancel method is executed, revert isn't, and instead the item is immediately return to it's original location?

推荐答案

经过数小时的寻找解决方案，我决定实现我想做的唯一方法是修改jQuery sortable插件的注册方式.恢复时间.目的是允许revert属性不仅接受boolean或integer，而且接受function.这是通过非常轻松地将prototype挂接到ui.sortable上而实现的，看起来像这样.

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 revert property to not only accept a boolean or integer, but also accept a function. This was achieved by hooking into the prototype on the ui.sortable with quite a lot of ease, and looks something like this.

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

这篇关于jQuery Sortable-取消和还原未按预期工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！