Сброс позиций перетаскивания

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