CODEWITHSUNDEEP
javascriptjqueryhtmldrag-and-drop
Yi Ming
Yi Ming

Reputation: 41

Drag and drop reset button to original position

I wanted to create a reset button to reset the position of my icons back to original position.. I not sure how to start it.. Whenever I drag and drop it is not in the droppable it will went back to the original position.. I want when there is icons inside droppable, when reset button pressed it will reset the position of the icon back to original position.

jsFiddle

https://jsfiddle.net/xInfinityMing/c0mmbspz/

HTML

<div id="dragIcons">
  <img width="100px" height="100px"src="https://cdn2.iconfinder.com/data/icons/metro-uinvert-dock/256/MS_Office_Upload_Center.png">
  <img width="100px" height="100px" src="https://cdn2.iconfinder.com/data/icons/metro-uinvert-dock/256/MS_Office_Upload_Center.png">
  <img width="100px" height="100px" src="https://cdn2.iconfinder.com/data/icons/metro-uinvert-dock/256/MS_Office_Upload_Center.png">
  <img width="100px" height="100px" src="https://cdn2.iconfinder.com/data/icons/metro-uinvert-dock/256/MS_Office_Upload_Center.png">
</div>
<div id="briefcase">
  <div id="briefcase-full">
  </div>
  <div id="briefcase-droppable">
  </div>
</div>
<button id="reset" type="button" onclick="doSomething()">Reset</button>

Java

$(function() {
  $("#dragIcons img").draggable({
  revert: "invalid",
  refreshPositions: true,
  drag: function(event, ui) {
    ui.helper.removeClass("end-draggable");
    ui.helper.addClass("draggable");
  },
  stop: function(event, ui) {
    ui.helper.addClass("end-draggable");
    ui.helper.removeClass("draggable");
  }
});
$("#briefcase-droppable").droppable({
  drop: function(event, ui) {
    $(this).parent().css('background-image','url("http://icons.iconarchive.com/icons/dtafalonso/yosemite-flat/512/Folder-icon.png")');
    if ($("#briefcase").length == 0) {
      $("#briefcase-droppable").html("");
    }
      ui.draggable.addClass("dropped");
      $("#briefcase-droppable").append(ui.draggable);
    }
  });
});

Upvotes: 0

Views: 2231

Answers (1)

se0kjun
se0kjun

Reputation: 550

you need to use detach. when you click reset button, it removes image in briefcase-droppable and appends into dragIcons.

$('#reset').click(function(e) {
    e.preventDefault();
    var dropped_icon = $('#briefcase-droppable')
        .children()
        .detach()
        .removeClass('dropped end-draggable')
        .removeAttr('style')
        .css('position', 'relative');

    $('#dragIcons').append(dropped_icon);
    $('#briefcase').css('background', 'url("http://icons.iconarchive.com/icons/mcdo-design/smooth-leopard/256/Upload-Folder-Blue-icon.png")');
});

Here's a fiddle

Upvotes: 1

Related Questions