<div class="container">
  <div class="parts">
    <img src="https://i.imgur.com/GONNbHf.png" class="draggable" />
    <img src="https://i.imgur.com/optSzq4.png" class="draggable" />
    <img src="https://i.imgur.com/qJDxc4o.png" class="draggable" />
    <img src="https://i.imgur.com/tIZGoeR.png" class="draggable" />
    <img src="https://i.imgur.com/bKlbeXU.png" class="draggable" />
    <img src="https://i.imgur.com/eUPbX3H.png" class="draggable" />
    <img src="https://i.imgur.com/voJPsR5.png" class="draggable" />
    <img src="https://i.imgur.com/dt2gqit.png" class="draggable" />
    <img src="https://i.imgur.com/2POeyJZ.png" class="draggable" />
  </div>
  <div class="body">
    <img src="https://i.imgur.com/kXbr8Tb.png" />
  </div>
</div>

* {
  margin: 0;
  padding: 0;
  -moz-user-select: none;
  -khtml-user-select: none;
  user-select: none;
}
.container {
  display: flex;
  align-items: center;
  justify-content: space-around;
  min-height: 100vh;
  background: #efefef;

  .parts {
    position: relative;
    border: 3px dashed black;
    width: 250px;
    height: 100vh;
    img {
      position: absolute;
      &:nth-child(1) {
        top: 50px;
      }
      &:nth-child(2) {
        top: 100px;
      }
      &:nth-child(3) {
        top: 150px;
      }
      &:nth-child(4) {
        top: 200px;
      }
      &:nth-child(5) {
        top: 200px;
        left: 150px;
      }
      &:nth-child(6) {
        top: 300px;
      }
    }
  }
  .body {
  }
}

const draggableElements = document.querySelectorAll(".draggable");
let initX, initY, firstX, firstY, whichDown;

window.addEventListener(
  "mouseup",
  function () {
    if (whichDown) {      
      whichDown.style.zIndex = 0;
    }
    whichDown = null;
  },
  false
);

window.addEventListener("mousemove", draggable, false);

draggableElements.forEach((element) => {
  element.addEventListener("mousedown", function (e) {
    e.preventDefault();
    whichDown = this;
    initX = this.offsetLeft;
    initY = this.offsetTop;
    firstX = e.pageX;
    firstY = e.pageY;
  });
});

function draggable(e) {
  e.preventDefault();
  if (!whichDown) return;
  whichDown.style.zIndex = 9;
  whichDown.style.left = initX + e.pageX - firstX + "px";
  whichDown.style.top = initY + e.pageY - firstY + "px";
}