拖拽实现2

2.markdown

拖拽实现2

A Pen by 柏 on CodePen.

License.

index.html

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

script.js

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

let startDrag = false;

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

document.addEventListener('mousemove', (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`;
});

ball.addEventListener('mouseup', () => {
  startDrag = false;
});

style.css

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