JSFiddle - React, Tailwind, and code Playground

HTML

<div id="dragIcons">
  <img width="100px" height="100px" src="http://digitalblowfish.synology.me/tomato_dev/assets/img/gebiz.png">
  <img width="100px" height="100px" src="http://digitalblowfish.synology.me/tomato_dev/assets/img/b2b.png">
  <img width="100px" height="100px" src="http://digitalblowfish.synology.me/tomato_dev/assets/img/pitches.png">
  <img width="100px" height="100px" src="http://digitalblowfish.synology.me/tomato_dev/assets/img/creative.png">
</div>
<div id="briefcase">

</div>

CSS

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

.dropped {
  position: static !important;
  z-index: 100;
}

#dragIcons {
  padding: 5px;
  min-height: 120px;
  width: 500px;
}

#briefcase {
  border: 5px solid #ccc;
  height: 300px;
  width: 380px;
  margin-left: auto;
  margin-right: auto;
  
  position: absolute;
  
  background: url("http://digitalblowfish.synology.me/tomato_dev/assets/img/briefcase.svg");
}

JavaScript

$(function() {
  $("#dragIcons img").draggable({
    revert: "invalid",
    refreshPositions: true,
    drag: function(event, ui) {
      ui.helper.addClass("draggable");
    },
    stop: function(event, ui) {}
  });
  $("#briefcase").droppable({
    drop: function(event, ui) {
      if ($("#briefcase img").length == 0) {
        $("#briefcase").html("");
      }
      ui.draggable.addClass("dropped");
      $("#briefcase").append(ui.draggable);
    }
  });
});