拖拽放置

.markdown

拖拽放置

A Pen by 柏 on CodePen.

License.

index.html

<div id="ball"></div>


<div id="door" >
  
</div>

script.js

const ball = document.getElementById('ball');
const door = document.getElementById('door');

let startDrag = false;

ball.addEventListener('mousedown', () => {
  startDrag = true;
});

const mousemoveCb = (e) => {
  if(!startDrag) return;
  let x = e.pageX - ball.offsetWidth / 2;
  let y = e.pageY - ball.offsetHeight / 2;
  ball.style.left = `${x}px`;
  ball.style.top = `${y}px`;
};

document.addEventListener('mousemove', mousemoveCb);

document.addEventListener('mouseup', (e) => {
  startDrag = false;
  
  ball.hide = true;
  const elementBelow = document.elementFromPoint(e.clientX, e.clientY);
  ball.hide = false;
  
  if(elementBelow === door) {
    door.appendChild(ball);
    ball.style.left = `0px`;
    ball.style.top = `0px`;
    ball.style.position = 'static';

    document.removeEventListener('mousemove', mousemoveCb);
  }
});

style.css

#ball{
  background: red;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
}

#door {
  width: 400px;
  height: 200px;
  border: 1px solid black;
  position: relative;
  top: 100px;
}