JQuery UI：取消Droppable Drop可排序

Question

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

我已經添加了許多項目的可排序 - 這里的任務是允許拖動排序，這一切都很好。

但我也希望合並droppable，以便將項目放到“復制我”區域 - 任務將復制項目（我稍后會工作）

問題是可放置目標位於可排序列表的底部（我不想移動它），一旦發生丟棄，可排序項目就會移動到列表的底部。

我想要做的是在drop事件觸發時取消此類。

您可以在此處查看我的問題 （只需將“項目1”拖到“刪除到復制項目”區域，您將看到排序未被取消）

正如您所看到的，我在droppable“drop”事件中嘗試了以下內容（從JQuery UI Docs建議），但它似乎不起作用......

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

我也對如何實現我正在尋找的“復制”效果的任何其他建議持開放態度。

謝謝

Answer 1

好的，所以我找到了一個完成這項工作的解決方案。

如果您在可排序函數的“停止”事件中有取消代碼，它將起作用。 但是，只有在“恢復”完成后才會應用。 問題是我試圖從droppable“drop”事件中復制/恢復元素，這太早了。

解決方案是等待“停止”事件完成，為了實現這一點，我必須創建一個“等待副本”標志，以便在“停止”事件中進行檢查。

這是一個例子

它仍然感覺不對（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();
}

無論如何，希望這會幫助那些想要同樣效果的人......雖然沒有偷我的設計;）