重置位置拖放

Reset positions drag and drop

有人能帮我吗,如何将拖动的项目重置为默认位置(与页面加载后相同)??

例如在单击按钮后..

jsfiddle有一个link: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));
    }
  });
});

您需要 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));
        }
      });
    }
    });