实现一个div随鼠标移动的功能

最新推荐文章于 2022-08-20 13:28:45 发布

Slueia

最新推荐文章于 2022-08-20 13:28:45 发布

阅读量102

点赞数

本文链接：https://blog.csdn.net/Slueia/article/details/115464922

版权

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div id="targetX" style="background-color: red; height: 300px; width: 300px; position: absolute; top: 100px; left: 100px"></div>
</body>
<script>
  let startX, startY
  let domX, domY
  let isMoveStatus = false
  let moveEle = document.getElementById('targetX')
  function onMouseDown(e) {
    e = e || window.event
    isMoveStatus = true
    startX = e.clientX
    startY = e.clientY
    domX = parseInt(moveEle.style.left)
    domY = parseInt(moveEle.style.top)
  }
  function onMouseUp(e) {
    console.log('222')
    e = e || window.event
    isMoveStatus = false
  }
  function onMouseMove(e) {
    console.log('333')
    e = e || window.event
    if(isMoveStatus){
      moveEle.style.left = e.clientX - (startX - domX) + 'px'
      moveEle.style.top = e.clientY - (startY - domY) + 'px'
    }
  }
  moveEle.onmouseup = onMouseUp
  moveEle.onmousemove = onMouseMove
  moveEle.onmousedown = onMouseDown
</script>
</html>