将重置按钮拖放至原位置

Question

我想要创建一个重置按钮，将图标的位置重新设置到原来的位置。我不知道该怎么开始。每当我拖放它的时候，它就不会落在可下垂的地方，它就会回到原来的位置。我想当有图标在可下垂，当重置按钮按下它将图标的位置复位回到原来的位置。

jsFiddle

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

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

Answer 1

您需要使用detach。单击reset按钮时，它将删除briefcase-droppable中的图像并附加到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")');
});

这是一个小提琴