12

我正在使用 JQuery 1.5.1 和 JQuery UI 1.8.11。

我为许多项目添加了可排序的 - 这里的任务是允许拖动排序，这一切都很好。

但我也想合并 droppable，以便可以将项目拖放到“复制我”区域 - 那里的任务将是复制项目（我稍后会解决这个问题）

问题是可放置目标位于可排序列表的底部（我不想移动它），一旦发生放置，可排序项目就会移动到列表底部。

我想要做的是在 drop 事件触发时取消这种排序。

您可以在此处查看我的问题（只需将“项目 1”拖到“拖放到复制项目”区域，您将看到排序不会被取消）

如您所见，我在可放置的“drop”事件中尝试了以下操作（从 JQuery UI Docs 建议），但它似乎不起作用......

$(this).sortable('cancel');

对于如何实现我正在寻找的这种“拖放复制”效果，我也愿意接受任何其他建议。

谢谢

4

1 回答 1

4

好的，所以我制定了一个可以完成这项工作的解决方案。

如果您在可排序函数的“停止”事件中使用取消代码，则它确实有效。但是，它仅在“还原”完成后才适用。问题是我试图从可放置的“drop”事件中复制/还原元素，这还为时过早。

解决方案是等待“停止”事件完成，为此我必须创建一个“等待复制”标志，以便在“停止”事件中进行检查。

这是一个例子

它仍然感觉不正确（UX 方面），但它工作正常，您始终可以在 sortable 函数上将 revert 设置为 false 以获得更好的感觉。

示例中的代码如下...

var itemCount = 3;
var awaitingCopy = false;

$(init);

function init() {
    $("#Items").sortable({
        revert: true,
        placeholder: "ItemPlaceHolder",
        opacity: 0.6,
        start: StartDrag,
        stop: StopDrag
    });

    $("#CopyItem").droppable({
        hoverClass: "CopyItemActive",
        drop: function(event, ui) {
            awaitingCopy = true;
        }
    });

    $("#NewItem").click(function(e) {
        e.preventDefault();
        itemCount++;
        var element = $("<div class='Item'>Item " + itemCount + "</div>");
        $("#Items").append(element);
        element.hide().slideDown(500);
    });
}

function CopyItem(element) {
    awaitingCopy = false;
    var clone = element.clone();
    $("#Items").append(clone);
    clone.hide().slideDown(500);
}

function StartDrag() {
    $("#NewItem").hide();
    $("#CopyItem").show();
}

function StopDrag(event, ui) {
    if (awaitingCopy) {
        $(this).sortable('cancel');
        CopyItem($(ui.item));
    }
    $("#NewItem").show();
    $("#CopyItem").hide();
}

无论如何，希望这会帮助其他想要同样效果的人......不过不要偷我的设计；）

于 2011-10-20T13:19:15.920 回答