Question

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

我已为多个项目添加了sortable - 这里的任务是允许拖动进行排序，这一切都正常。

但是我也希望合并droppable，以便将项目放到“复制我”区域 - 任务将会复制该项目（我稍后会解决这个问题）

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

我想要做的是在drop事件触发时取消此类。

You can see my problem in action here（只需将“项目1”拖到“删除到复制项目”区域，您就会看到排序没有被取消）

正如您所看到的，我在droppable“drop”事件（从JQuery UI Docs中建议）中尝试了以下内容，但它似乎不起作用...

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

我也对如何实现我正在寻找的“复制”效果的任何其他建议持开放态度。

由于

Answer 1

好的，所以我找到了一个能够完成这项工作的解决方案。

如果您在可排序功能的“停止”事件中有取消代码，它将起作用。但是，只有在“恢复”完成后才会应用。问题是我试图从droppable“drop”事件中复制/恢复元素，这太早了。

解决方案是等待“停止”事件完成，为了达到这个目的，我必须创建一个“等待副本”标志，在“停止”事件中进行检查。

Here is an example

它仍然感觉不对（UX-wise）但它的工作正确，你总是可以在可排序函数上设置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();
}

无论如何，希望这会帮助那些想要同样效果的人......虽然不会偷我的设计;）

JQuery UI：取消Droppable Drop可排序

1 个答案: