Question

我想创建一个重置按钮，将我的图标位置重置回原始位置..我不知道如何启动它...每当我拖放它不在droppable中它会回到原来的位置..我想当droppable中有图标时，按下复位按钮会将图标的位置重置回原位。

的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>

爪哇

$(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")');
});

这是fiddle

将重置按钮拖放到原始位置

1 个答案: