Javascript 将jQuery UI可拖放元素还原为原始div

有没有办法创建一个重置按钮，使所有可拖放元件返回其原始位置

我正在使用下面的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);

$（窗口）.load（函数（）{var counter=0；
$（“.draggable”）.draggable（{cursor:“move”，revert:“invalid”}）；
$（“.drop”）.dropable（{accept:“.draggable”，
drop：函数（事件、用户界面）{
控制台日志（“下降”）；
$（this.removeClass（“border”）.removeClass（“over”）；
var DROPED=ui.draggable；
var droppedOn=$（本）；
$（已删除）.detach（）.css（{top:0，left:0}）.appendTo（droppedOn）；
计数器++；
如果（计数器>0）{
$（“.hidden”）.removeClass（）.addClass（“可见”）；
}
}, 
结束：功能（事件、元素）{
$（此）.addClass（“超过”）；
控制台。登录（“结束”）；
}
,
输出：功能（事件、元素）{
$（此）.removeClass（“结束”）；
计数器--；
}
});
$（“.start”）.dropable（{accept:”.draggable），drop:function（事件，用户界面）{
控制台日志（“下降”）；
$（this.removeClass（“border”）.removeClass（“over”）；
var DROPED=ui.draggable；
var droppedOn=$（本）；
$（已删除）.detach（）.css（{top:0，left:0}）.appendTo（droppedOn）；
计数器--；
如果（计数器<1）{
$（“.visible”）.removeClass（）.addClass（“隐藏”）；
}
}});
})（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>

---

在等待答案的同时，继续挖掘，终于找到了答案

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

---

在等待答案的同时，继续四处挖掘，终于找到了这个答案

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