リセット位置をドラッグ＆ドロップ

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