Drag and Drop from image onto another image
<p>I wanted to drag and drop image onto another image.
I cannot figure it out.. I want to drag icons image, onto droppable briefcase and the icons will stay there.. my codes.. I want the icons image to be onto briefcase image not outside of briefcase image. </p>

<h2>Javascript:</h2>

<pre><code>$(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);
    }
  });
});
</code></pre>

<h2>HTML:</h2>

<pre><code>&lt;div id="dragIcons"&gt;
  &lt;img src="assets/img/gebiz.png"&gt;
  &lt;img src="assets/img/b2b.png"&gt;
&lt;/div&gt;
&lt;div id="briefcase"&gt;
  &lt;img width="600px" height="auto" src="assets/img/briefcase.svg"&gt;
&lt;/div&gt;
</code></pre>

<h2>CSS:</h2>

<pre><code>.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;
}
</code></pre>