原生JS实现拖拽功能

本文实例为大家分享了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事件

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

 

 
 
 
 
 
 #box {
 width: 100px;
 height: 100px;
 background: red;
 position: absolute
 }
 
 

 

 
 
 
 
 

 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。