重置位置拖放

Question

有人可以帮助我，如何将拖动的项目重置为默认位置（与页面加载后相同）??

例如点击按钮后...

有一个指向jsfiddle的链接：https://jsfiddle.net/dj8q2qmb/1/

$(document).ready(function() {
  $(".card").draggable({
    appendTo: "body",
    cursor: "move",
    helper: 'clone',
    revert: "invalid",
  });

  $(".launchPad").droppable({
    tolerance: "intersect",
    accept: ".card",
    drop: function(event, ui) {
      $(this).append($(ui.draggable));
    }
  });

  $(".stackDrop").droppable({
    tolerance: "intersect",
    accept: ".card",
    drop: function(event, ui) {
      $(this).append($(ui.draggable));
    }
  });
});

Answer 1

在进行更改之前，您需要clone()列表 如果点击重置按钮，则重新收听拖动

在https://jsfiddle.net/dj8q2qmb/3/

上进行测试

    $(document).ready(function() {
    //clone list
    var launchPad = $(".launchPad").clone();
   //reset button
    $("[name='reset']").click(function(){
    //empty bottom div
    $("#dropZone .stackDrop").empty();
    //get cloned content
    $(".launchPad").html(launchPad.html());
    //re-listen to dragging  
    listenToDragable();
    });

    //listen to dragging
    listenToDragable();

    function listenToDragable(){
      $(".card").draggable({
        appendTo: "body",
        cursor: "move",
        helper: 'clone',
        revert: "invalid",
      });

      $(".launchPad").droppable({
        tolerance: "intersect",
        accept: ".card",
        drop: function(event, ui) {
          $(this).append($(ui.draggable));
        }
      });

      $(".stackDrop").droppable({
        tolerance: "intersect",
        accept: ".card",
        drop: function(event, ui) {
          $(this).append($(ui.draggable));
        }
      });
    }
    });