JQuery UI：取消可丟棄丟棄

我正在使用JQuery 1.5.1和JQuery UI 1.8.11。JQuery UI：取消可丟棄丟棄

我已經添加了許多項目的排序 - 這裏的任務是允許拖動排序，這一切工作正常。

但我也想納入可放開，使項目可以放到一個「抄我的」區 - 任務會有重複的項目（我將致力於該位出來以後）

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

我想要做的就是取消這種排序事件時觸發。

You can see my problem in action here（只需將「項目1」到「跌落到複製項目」區域，你會看到那種不被取消）

正如你可以看到我已經試過在可放開「降以下「事件（從JQuery的UI文件建議），但它似乎並沒有工作...

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

我也願意就如何實現這一目標的任何其他建議‘降複製’我要找效果。

感謝

來源

2011-10-20 musefan

什麼你的意思是取消嗎？取消將停止排序，並在您離開它的確切位置留下您正在排序的內容。 – jQuerybeast

@jQuerybeast：是的，我想要的是，「取消」將把項目返回到原始空間。因此，在我的JSFiddle中，如果您嘗試複製項目1，則複製將發生，item1應恢復到頂端......此時它將移動到底部，因爲這是放置事件之前的最後一個高亮位置 – musefan

取消doesn' t可以排序但可拖動。在排序中，您可以取消/停止整個功能。 – jQuerybeast

好了，我已經制定了解決方案，做這項工作。

如果您在可排序函數的「停止」事件中使用取消代碼，則取消代碼無效。但是，只有在「恢復」完成後才能應用。問題是我試圖從droppable「drop」事件中複製/還原元素，這太早了。

解決方案是等待「停止」事件完成，爲了實現這一點，我必須創建一個「等待複製」標誌，在「停止」事件中進行檢查。

Here is an example

它仍然感覺不對（UX-明智的），但它的工作原理是正確的，而你總是可以設置恢復到上排序功能虛假得到一個稍微好一點的感覺。

從例子中的代碼如下...

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-20 13:19:15 musefan

這幫助我找到了解決方案，但我只想指出全局變量是不必要的 - 它看起來像你沒有使用正確的jQuery選擇器。它應該是$（「＃Items」）。sortable（'cancel'）; – NightOwl888

JQuery UI：取消可丟棄丟棄

回答

相關問題