https://jsfiddle.net/xInfinityMing/9vmw4mtc/6/

<div id="dragIcons">
  <img width="100px" height="100px" src="assets/img/gebiz.png">
  <img width="100px" height="100px" src="assets/img/b2b.png">
  <img width="100px" height="100px" src="assets/img/pitches.png">
  <img width="100px" height="100px" src="assets/img/creative.png">
</div>
<div id="briefcase">
  <div id="briefcase-droppable">
  </div>
</div>

.draggable
{
  filter: alpha(opacity=100);
  opacity: 1.0;
  z-index: 100;
  transition: none !important;
  animation: pulse 0.4s alternate infinite;
}
.end-draggable
{
  animation: 0;
}
.dropped
{
  position: static !important;
  transition: none !important;
  animation: 0;
}
#dragIcons
{
  padding: 5px;
  min-height: 100px;
  width: 500px;
  margin-left: auto;
  margin-right: auto;
}
#briefcase
{
  height: 485px;
  width: 600px;
  margin-left: 300px;
  background: url("../../../assets/img/folder.png");
  background-position:
  background-repeat: no-repeat;
  position: absolute;
}
#briefcase-open
{
  height: 485px;
  width: 600px;
  margin-left: 300px;
  background: url("../../../assets/img/folder-open.png");
  background-position:
  background-repeat: no-repeat;
  position: absolute;
}
#briefcase-droppable
{
  border-style: solid;
  height: 285px;
  width: 450px;
  margin-left: 80px;
  margin-top: 110px;
}
@keyframes pulse {
  100% {
  transform: scale(1.1);
  }
}

$(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) {
        if ($("#briefcase").length == 0) {
            $("#briefcase-droppable").html("");
        }
        ui.draggable.addClass("dropped");
        $("#briefcase-droppable").append(ui.draggable);
    }
  });
});