CODEWITHSUNDEEP
javascriptjquerydrag-and-dropreset
Honzík Azjol Havelka
Honzík Azjol Havelka

Reputation: 325

Reset positions drag and drop

could someone help me, how to reset dragged items to the default positions (same as after page load)??

For example after click on button..

There is a link to 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));
    }
  });
});

Upvotes: 0

Views: 1318

Answers (1)

Mamdouh Saeed
Mamdouh Saeed

Reputation: 2324

You need to clone() list before changes made and re-listen to dragging if reset button clicked

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

Upvotes: 1

Related Questions