將jQuery UI droppable元素還原爲原始div

Question

是否有創建重置按鈕的方法，該按鈕將所有可拖放/可拖動元素返回到原始位置？

我使用的是以前的回答在這裏修改的以下JavaScript。

$(window).load(function(){var counter = 0; 
     $(".draggable").draggable({ cursor: "move", revert: "invalid"}); 
     $(".drop").droppable({ accept: ".draggable", 

     drop: function(event, ui) { 

       console.log("drop"); 
       $(this).removeClass("border").removeClass("over"); 
     var dropped = ui.draggable; 
     var droppedOn = $(this); 
     $(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn);  
     counter ++; 
     if (counter > 0) { 
      $(".hidden").removeClass().addClass("visible"); 
      } 


      }, 
     over: function(event, elem) { 
       $(this).addClass("over"); 
       console.log("over"); 
     } 
      , 
       out: function(event, elem) { 
       $(this).removeClass("over"); 
       counter --; 
       } 
       }); 


$(".start").droppable({ accept: ".draggable", drop: function(event, ui) { 
       console.log("drop"); 
       $(this).removeClass("border").removeClass("over"); 
     var dropped = ui.draggable; 
     var droppedOn = $(this); 
     $(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn);  
     counter --; 
     if (counter < 1) { 
      $(".visible").removeClass().addClass("hidden"); 
      } 
      }}); 



})(jQuery); 

這裏是我的HTML

<div class="row"> 
<div class="large-8 columns"> 
<div class="start"> 
     <img src="http://placehold.it/140x100" id="one" title="one" class="draggable ui-widget-content" /> 
     <img src="http://placehold.it/150x100" id="two" title="two" class="draggable ui-widget-content" /> 
</div> 
</div> 

<div class="large-4 columns"> 
<div class="drop"> 

</div> 
<div class="large-1 columns"> 
<input type="submit" value="generate report" class="hidden" /> 

<input type="reset" value="reset" class="reset" /> 
</div> 
</div> 
</div> 

Answer 1

繼續挖過來在等待一個答案，設法想出這個！

$(".reset").click(function() { 
    $(".draggable").appendTo(".start"); 
});