JQuery UI：取消Droppable Drop可排序 [英] JQuery UI: Cancel Sortable upon Droppable Drop

问题描述

我使用的是JQuery 1.5.1和JQuery UI 1.8.11。

I am using JQuery 1.5.1 and JQuery UI 1.8.11.

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

I have added sortable for a number of items - the task here is to allow drag to sort, this all works fine.

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

But I also want to incorporate droppable, so that the item can be dropped onto a "copy me" area - the task there will be to duplicate the item (I will work that bit out later)

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

Problem is the droppable target is at the bottom of the sortable list (I do not want to move this) and once the drop occurs the sortable item moves to the bottom of the list.

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

What I want to do is cancel this sort when the drop event fires.

您可以在此处查看我的问题（只需将第1项拖到Drop to Copy Item区域，你会看到排序没有被取消）

You can see my problem in action here (just drag "Item 1" onto the "Drop to Copy Item" area and you will see the sort does not get cancelled)

你可以看到我在droppabledrop事件中尝试了以下内容（从JQuery UI Docs建议）但它似乎不起作用......

As you can see I have tried the following in the droppable "drop" event (suggested from JQuery UI Docs) but it does not seem to work...

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

我也对任何其他有关如何实现这种即时复制效果的建议持开放态度我是寻找。

I am also open to any other recommendations on how to achieve this "drop to copy" effect I am looking for.

谢谢

推荐答案

好的，所以我一直在努力找出完成工作的解决方案。

OK, so I have worked out a solution which does the job.

如果您在可排序函数的停止事件中有取消代码，则取消代码可以正常工作。但是，只有在恢复完成后才会应用。问题是我试图从droppabledrop事件中复制/恢复元素，这太早了。

the cancel code does work if you have it in the "stop" event of the sortable function. However, it will only apply once the "revert" has completed. The problem is that I was trying to copy/revert the element from the droppable "drop" event and this was too early.

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

The solution is to wait for the "stop" event to complete, and to achieve this I had to create a "awaiting copy" flag, to be checked in the "stop" event.

这是一个例子

它仍然感觉不到对（UX-wise）但它工作正常，你总是可以在可排序函数上设置revert为false以获得更好的感觉。

It still doesn't feel right (UX-wise) but it works correct, and you could always set revert to false on the sortable function to get a slightly better feel.

示例中的代码如下...

The code from the example is as follows...

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

无论如何，希望这会帮助其他想要同样效果的人。虽然没有偷我的设计;）

Anyway, hopefully this will help others who want the same kind of effect... no stealing my design though ;)

这篇关于JQuery UI：取消Droppable Drop可排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！