只有当拖动到无效拖放时，我如何才能获得可拖动的回复到原始位置？

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

这应该自动捕捉元素回来，如果它不是足够远，以取代其他元素的。你只是把它放在容器上