只有當拖動到無效拖放時，我如何才能獲得可拖動的回覆到原始位置？

Question

我有一個我想允許被拖到任何地方的元素。但是，如果它被拖放到拒絕它的droppable上（通過accept），我希望它在拖動之前恢復到原始位置。我怎樣才能做到這一點？

編輯：更具體一點：我希望滿足兩個條件，以便物品被移回：1.它被放在可投擲物上，並且2.可投擲物不接受所述物品。可拖動的還原選項只檢查條件2

Answer 1

我有一些我認爲應該工作的代碼。請注意，它不使用accept選項來指定放置可接受的拖放對象。相反，您必須檢查拖放事件中是否應該手動拒絕可拖動。

 
$(document).ready(function() { 
    $('.droppable-class').droppable({ 
     drop: function(event, ui) { 
      // check whether or not draggable should be rejected here... 
      if (...) { 
       ui.draggable.data('rejected', true); 
      } 
     } 
    }); 

    $('.draggable-class').draggable({ 
     revert: false, 
     start: function(event, ui) { 
      ui.helper.data('rejected', false); 
      ui.helper.data('original-position', ui.helper.offset()); 
     }, 
     stop: function(event, ui) { 
      if (ui.helper.data('rejected') === true) { 
       ui.helper.offset(ui.helper.data('original-position')); 
      } 
     } 
    }); 

Answer 2

您想使用排序花花公子 - 是這樣的：

$('#sortable-area').sortable({ 
    accept: '.child', 
    items: '.child', 
    revert: 300, 
    opacity: 0.8, 
    containment: 'document' 
}); 

這應該自動捕捉元素回來，如果它不是足夠遠，以取代其他元素的。你只是把它放在容器上