jQuery UI：如何取消可放置元素上成功放置的可排序元素的還原？

我有一個sortable列表，其中有幾個元素需要被用戶重新排序。jQuery UI：如何取消可放置元素上成功放置的可排序元素的還原？

或者，元素也可以拖動到5個可用下拉區（droppable容器）上。

我遇到的問題是這樣的：當掉落成功在droppable區完成，sortable的復歸動畫仍在播放的動畫元素回落放回sortable列表。

相反，我想製作動畫的方式，助手從drop發生的位置拍攝，然後動畫到的droppable區，有點像將文件拖動到Mac上的垃圾箱。然而

對於後者的工作我需要：

在成功下降，停止復歸動畫。
複製掉落元素的座標並將自定義動畫啓動到可放置元素的中心。

的問題是，部分（1）內，draggable允許在revert的「無效」或「有效」的標誌，但sortable沒有。

關於我如何實現這一點的任何想法？

來源

2012-12-17 Jannis

所以後有點來回我已經成功克隆原ui.helper元素（即sortable創建），並用該克隆（這是不被還原回明顯），完成自定義動畫序列來解決這個同時刪除原始幫手和佔位符（由sortable創建）以隱藏sortable的恢復動畫。

它並不像我想要的那樣乾淨，因爲我仍然在讓sortable的恢復函數執行（而不是取消它），但是直到有人有更好的主意，它才起作用。下面

代碼：

// default sortable interaction/setup. 
$('.sortable-list').sortable({ 
    placeholder: 'sortable-list__item sortable-list__item--placeholder', 
    revert:  true, 
    helper:  'clone', 
    tolerance: 'pointer', 
    connectWith: '.sortable-list', 
    appendTo: 'body', 
    zIndex:  1000 
}); 

// dropzone interaction will grab the ui.helper from sortable clone it and then 
// reuse it for it's own finish animation while removing the helpers from the 
// sortable list and dom. 
$('.dropzone') 
    .droppable({ 
    accept:  '.sortable-list__item', 
    hoverClass: 'dropzone--hover', 
    activeClass: 'dropzone--active', 
    tolerance: 'pointer' 
    }) 
    .on('drop', function(event, ui) { 
    var $item = ui.draggable, // this is the original item. 
     $helper = ui.helper; // this is the cloned item the user drags 

    // clone the helper instance and position it in the same exact spot where 
    // the user had left it using the ui.position 
    // (or ui.offset depending on your nesting/positioning of the helper) 
    var $clone = $helper.clone().css({ 
      "position": "absolute", 
      "top":  ui.position.top, 
      "left":  ui.position.left 
     }).appendTo('body'); 

     // cleanup the original helper (remove from stage) and hide placeholder 
     // elements. We're hiding the latter because the revert callback of 
     // sortable is removing it for us and will otherwise throw an error that 
     // the placeholder can't be removed because it no longer exists in the DOM. 
     $helper.remove(); 
     $('.sortable-list__item--placeholder').hide(); 

    // launch into your own animation sequence using the $clone of $helper 
    // and process the drop data accordingly. 

    });

來源

2012-12-20 21:00:20 Jannis

jQuery UI：如何取消可放置元素上成功放置的可排序元素的還原？

回答

相關問題