javascript - jQuery UI のドロップ可能な要素を元の 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>