JavaScript简单实现DOM元素拖拽

最新推荐文章于 2023-01-06 18:57:30 发布

Void骑士

最新推荐文章于 2023-01-06 18:57:30 发布

阅读量293

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/return_MU/article/details/115044491

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

主要是使用了event.pageX和dom.getBoundingClientRect属性和方法

HTML

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      height: 100vh;
    }
    .container {
      position: relative;
      height: inherit;
    }
    .moving {
      position: absolute;
      width: 100px;
      height: 100px;
      background-color: khaki;
    }
  </style>
</head>
<body>
  <div id="container">
    <div class="moving"></div>
  </div>
  <script src="./index.js"></script>
</body>
</html>

JavaScript

let item = document.getElementById('container')
item.addEventListener('mousedown', bindMoving)
item.addEventListener('mouseup', unBindMoving)

function bindMoving(event) {
  if (event.target.className === 'moving') {
    let x = event.pageX - event.target.getBoundingClientRect().x
    let y = event.pageY - event.target.getBoundingClientRect().y
    let k = { x, y }
    tmp = moving.bind(this, k)
    event.target.addEventListener('mousemove', tmp)
    event.target.addEventListener('mouseleave', unBindMoving)
  }
}

function unBindMoving(event) {
  event.target.removeEventListener('mousemove', tmp)
}

function moving(k) {
  event.target.style.cssText = `left: ${event.pageX - k.x}px; top: ${event.pageY - k.y}px;`
}

function tmp() {}

Void骑士

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript简单实现DOM元素拖拽

主要是使用了event.pageX和dom.getBoundingClientRect属性和方法HTML<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=devic
复制链接

扫一扫

专栏目录