jQueryUI Drop＆Revert

Question

我想讓它拖動一個可拖動的對象（a）到一個可拖放的對象（b）上時，會觸發b的拖放事件並將a恢復到原始位置。這可能嗎？

b.droppable({ 
    drop:function(event,ui){ 
     ui.draggable.revert <---- REVERT THE DRAGGABLE OBJECT TO ORIGINAL POSITION HERE 
    } 
}); 

Answer 1

是的，請檢查JSFiddle以瞭解您想實現的目標。

它設置你想要的還原功能：

$(function() { 
    $("#draggable").draggable({ 
     revert: function(dropped) { 
      var dropped = dropped && dropped[0].id == "droppable"; 
      if(!dropped) alert("I'm reverting!"); 
      return !dropped; 
     } 
    }).each(function() { 
     var top = $(this).position().top; 
     var left = $(this).position().left; 
     $(this).data('orgTop', top); 
     $(this).data('orgLeft', left); 
    }); 

    $("#droppable").droppable({ 
     activeClass: 'ui-state-hover', 
     hoverClass: 'ui-state-active', 
     drop: function(event, ui) { 
      $(this).addClass('ui-state-highlight').find('p').html('Dropped!'); 
     }, 
     out: function(event, ui) { 
      ui.draggable.mouseup(function() { 
       var top = ui.draggable.data('orgTop'); 
       var left = ui.draggable.data('orgLeft'); 
       ui.position = { top: top, left: left }; 
      }); 
     } 
    }); 
});