javascript - 从图像拖放到另一个图像上

Question

我想将图像拖放到另一个图像上。我无法弄清楚..我想将图标图像拖到可放置的公文包上，图标将留在那里..我的代码..我希望图标图像位于公文包图像上而不是公文包图像之外。

Javascript:

$(function() {
  $("#dragIcons img").draggable({
    revert: "invalid",
    refreshPositions: true,
    drag: function(event, ui) {
      ui.helper.addClass("draggable");
    },
    stop: function(event, ui) {
      ui.helper.removeClass("draggable");
      var image = this.src.split("/")[this.src.split("/").length - 1];
      if ($.ui.ddmanager.drop(ui.helper.data("draggable"), event)) {
        alert(image + " dropped.");
      } else {
        alert(image + " not dropped.");
      }
    }
  });
  $("#briefcase").droppable({
    drop: function(event, ui) {
      if ($("#briefcase img").length == 0) {
        $("#briefcase").html("");
      }
      ui.draggable.addClass("dropped");
      $("#briefcase").append(ui.draggable);
    }
  });
});

HTML:

<div id="dragIcons">
  <img src="assets/img/gebiz.png">
  <img src="assets/img/b2b.png">
</div>
<div id="briefcase">
  <img width="600px" height="auto" src="assets/img/briefcase.svg">
</div>

CSS:

.draggable {
  filter: alpha(opacity=100);
  opacity: 1.0;
}

.dropped {
  position: static !important;
}

#dragIcons {
  border: 2px solid #ccc;
  padding: 5px;
  min-height: 100px;
  width: 430px;
}

#briefcase {
  border: 5px solid #ccc;
  padding: 5px;
  height: auto;
  width: 600px;
  margin-left: auto;
  margin-right: auto;
}

Answer 1

删除 <img> #briefcase 中的标签分区取而代之的是，将 div 的背景设为图像，并将其位置设为 absolute .

这是 JSFiddle - 您必须修复图标的 CSS 定位，但主要思想就在那里。