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

将jQuery UI可放置元素恢复为原始div

1 个答案: