Question

编辑：Barebones jsFiddle： http://jsfiddle.net/37cwgxd1/

我对Sortable中的还原设置有些困难。

我有可排序删除ui.item，当它从Sortable列表中删除时。效果很好，除了在mouseStop上，帮助器恢复到原来的位置，然后触发删除ui.item的beforeStop函数。

在Sortable列表之外，当鼠标停止后，帮助程序不会恢复。更好的是，如果帮助器缩放到0然后被清除，那就太好了。

这是我的调用Sortable的脚本：

$(function() {
$( "#pl #da-thumbs" ).sortable({cursor: "move"}, {delay: 150}, {appendTo: 'body'}, {   revert: '100'}, {scroll: false}, {
receive: function(event, ui)
{
    sortableIn = 1;
    $(".ui-sortable-helper").css({"opacity":"1.0" , "transform":"scale(1.0)"});
},
over: function(event, ui)
{
    sortableIn = 1;
    $(".ui-sortable-helper").css({"opacity":"1.0" , "transform":"scale(1.0)"});
},
out: function(event, ui)
{
    sortableIn = 0;
    $(".ui-sortable-helper").css({"opacity":"0.3" , "transform":"scale(0.8)"});
},
beforeStop: function(event, ui)
{
    if (sortableIn == 0)
    {
        ui.item.remove();
    }
}
});

以下是适用于revert和_mouseStop的sortable.js源的适用部分：

_mouseStop: function(event) {

    //If we are using droppables, inform the manager about the drop
    var that = this,
        dropped = false;
    if ($.ui.ddmanager && !this.options.dropBehaviour) {
        dropped = $.ui.ddmanager.drop(this, event);
    }

    //if a drop comes from outside (a sortable)
    if (this.dropped) {
        dropped = this.dropped;
        this.dropped = false;
    }

    if ((this.options.revert === "invalid" && !dropped) || (this.options.revert === "valid" && dropped) || this.options.revert === true || ($.isFunction(this.options.revert) && this.options.revert.call(this.element, dropped))) {
        $(this.helper).animate(this.originalPosition, parseInt(this.options.revertDuration, 10), function() {
            if (that._trigger("stop", event) !== false) {
                that._clear();
            }
        });
    } else {
        if (this._trigger("stop", event) !== false) {
            this._clear();
        }
    }

    return false;
},

如果我需要修改sortbale.js以使其正常工作，那很好。提前谢谢。

Answer 1

解决了我自己的问题。当帮助程序被定位时，设置恢复为false。当它结束时，集合会恢复为100。同样在下降时，我将ui.item移动到助手的位置（使用绝对定位）并将其缩小到0以获得漂亮的消失效果。

查看jsFiddle：http://jsfiddle.net/37cwgxd1/5/

var sort = $(function () {
$("#sortable").sortable({
    cursor: "move"
}, {
    tolerance: "pointer"
}, {
    delay: 150
}, {
    appendTo: 'body'
}, {
    revert: '100'
}, {
    scroll: false
}, {
    receive: function (event, ui) {
        sortableIn = 1;
        $(".ui-sortable-helper").css({
            "opacity": "1.0",
            "transform": "scale(1.0)"
        });
    },
    over: function (event, ui) {
        sortableIn = 1;
        $("#sortable").sortable({ revert: '100' });
        $(".ui-sortable-helper").css({
            "opacity": "1.0",
            "transform": "scale(1.0)"
        });
    },
    out: function (event, ui) {
        sortableIn = 0;
        $("#sortable").sortable({ revert: false });
        $(".ui-sortable-helper").css({
            "opacity": "0.3",
            "transform": "scale(0.8)"
        });
    },
    beforeStop: function (event, ui) {
        var pos = ui.position,
            top = pos.top,
            left = pos.left,
            item = ui.item,
            width = item.css("width"),
            height = item.css("height");

        if (sortableIn == 0) {

            ui.item.attr("style", ui.item.attr("style") + " " +
                  "position: absolute; " + 
                  "top: " + top + "px; " +
                  "height: " + height + "px; " +
                  "width: " + width + "; " +
                  "left: " + left + "px; ");
            ui.item.css({
            "transform": "scale(0.0)"
        }).animate({
                opacity: "0.0"
            }, '300', function () {
                ui.item.remove();
            });
        }
    }
});
$("#sortable").disableSelection();
});

$(window).load(sort);

将帮助程序从可排序列表中删除后删除还原

1 个答案: