<div class="container" id="container">

  <p id="title"> Where do you drop the element? </p>

  <div class="wrapper" id="wrapper">

    <div class="outer" id="outer-1">

      <p> outer #1</p>    

    </div>

    <div class="outer" id="outer-2">

      <p> outer #2</p>

      <div class="inner"> drag & drop me </div>

    </div>

  </div>

  <p id="result"></p>

</div>

.container {

  margin: 5px auto;

  padding: 5px;

  width: 500px;

  height: 230px;

  border: solid 2px black;

  text-align: center;

  .wrapper {

    display: flex;

    flex-direction: row;

  }

  p {

    margin: 10px auto;

  }

}

​

.outer {

  width: 220px;

  height: 150px;

  margin: auto;

  background-color: #cfa;

  text-align: center;

}

​

.inner {

  width: 180px;

  height: 100px;

  margin: auto;

  background-color: #fcac;

}

​

const outer1 = document.getElementById("outer-1");

const outer2 = document.getElementById("outer-2");

const inner = document.getElementsByClassName("inner")[0];

const result = document.getElementById("result");

​

let dragging = false;

var currentX;

var currentY;

​

function startDragging(event) { 

  dragging = true;

  inner.style.top = "0";

  inner.style.left = "0";

  inner.style.position = "absolute";

}

​

function stopDragging(event) { 

  inner.style.pointerEvents = "none"; 

  const destination = document.elementFromPoint(currentX, currentY);

  inner.style.pointerEvents = "auto";

  result.innerText = destination.id + "의 위치로 드롭되었습니다.";

  dragging = false;

}

​

inner.addEventListener("mousedown", startDragging);

inner.addEventListener("mouseup", stopDragging);

​

document.onmousemove = (e) => {

  if(dragging){

    inner.style.left = e.pageX - 50 + "px";

    inner.style.top = e.pageY - 30 + "px";

​

    currentX = e.pageX;

    currentY = e.pageY;

  }

}