重置職位拖放

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