练习:JS实现拖拽

139 阅读1分钟

JS Bin链接

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS</title>
</head>
<body>
  <div id="a"></div>
</body>
</html>

CSS

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
#a {
  width:100px;
  background: red;
  height:100px;
   position: absolute; 
}

JS

let dragging = false;
a.addEventListener("mousedown", (e)=>{
  let x = e.clientX - a.offsetLeft;
  let y = e.clientY - a.offsetTop;
  dragging = true;
  document.addEventListener("mousemove", (e)=>{
    if(dragging === false){
        return
    }
    a.style.left = e.clientX - x + 'px';
    a.style.top = e.clientY - y + 'px';
  }) 
})
document.addEventListener("mouseup", ()=>{
  dragging = false;
})