原生JS实现拖拽功能

来源:https://www.jb51.net/article/202249.htm

本文实例为大家分享了JS实现拖拽功能的具体代码,供大家参考,具体内容如下

拖拽的原理:三个事件 onmousedown、onmousemove、onmousemove

1、鼠标按下,触发onmousedown,获取鼠标坐标x,y,获取元素坐标x,y

通过event.clientX、event.clientY获取鼠标位置的坐标

let x = e.clientX - box.offsetLeft; //鼠标点击坐标距离盒子左边缘的距离
let y = e.clientY - box.offsetTop; //鼠标点击坐标距离盒子上边缘的距离

2、设置元素left、top值,(元素要设置position:absolute)

box.style.left = ev.clientX - x + 'px';
box.style.top = ev.clientY - y + 'px';

3、放开鼠标取消dom事件

下面是详细代码:我只开了横向移动

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style>
 #box {
 width: 100px;
 height: 100px;
 background: red;
 position: absolute
 }
 </style>
</head>
 
<body style="position: relative;overflow: hidden;">
 <div id="box">
 </div>
 <script>
 window.onload = function () {
 let box = document.getElementById('box')
 box.onmousedown = function (ev) {
 let e = ev || event;
 let x = e.clientX - box.offsetLeft; //鼠标点击坐标距离盒子左边缘的距离
 let y = e.clientY - box.offsetTop; //鼠标点击坐标距离盒子上边缘的距离
 document.onmousemove = function (ev) {
  let e = ev || event;
  box.style.left = ev.clientX - x + 'px';
  box.style.top = ev.clientY - y + 'px';
  let bodyScreenX = ev.screenX
  let bodyClientWidth = document.body.clientWidth
  document.onmouseup = function (ev) {
  if (ev.clientX - x < 0) {
  box.style.left = 0
  } else if (bodyScreenX > bodyClientWidth) {
  box.style.right = 0
  box.style.left = bodyClientWidth - 100 + 'px'
  }
  document.onmousemove = null;
  document.onmouseup = null;
  }
 }
 }
 }
 </script>
</body>
</html>