从图像拖放到另一个图像

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> div中的#briefcase标记。相反，将div的背景作为图像并使其位置absolute。

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