前言

我们在网页操作的时候，经常用到鼠标拖拽元素的行为。本篇文章就来讨论一下鼠标拖拽元素的原理及简单的实现过程。

一、实现思路

首先鼠标拖拽要用到三大事件
onmousedown：鼠标选择元素
onmousemove：鼠标移动元素
onmouseup：释放元素，也就是先用鼠标点击元素，然后拖拽元素到某一位置，释放元素的过程。

那么如何进行拖拽移动呢，主要是根据我们鼠标移动时的坐标变化来实现的
伪代码如下：

鼠标在元素上按下时{   拖拽状态 = 1   记录下鼠标的x和y坐标   记录下元素的x和y坐标   }  鼠标拖拽元素移动时{   如果拖拽状态是0就什么也不做。   如果拖拽状态是1，那么{  元素y = 现在鼠标y - 原来鼠标y + 原来元素y   元素x = 现在鼠标x - 原来鼠标x + 原来元素x   }    鼠标放开时{   拖拽状态 = 0
}

二、具体步骤

1.鼠标在元素上按下时

dv.onmousedown = function(e) {//鼠标获取x坐标和y坐标x = e.clientX;y = e.clientY;//获取左部和顶部的偏移量（坐标）l = dv.offsetLeft;t = dv.offsetTop;//开关打开isDown = true;}

2.鼠标拖拽元素时

window.onmousemove = function(e) {if (isDown == false) {return;}//获取x和yvar nx = e.clientX;var ny = e.clientY;//计算移动后的左偏移量和顶部的偏移量//nx-x算的是是移动了多少，加上l之后的结果就是此时div的左部的偏移量（坐标）var nl = nx - x + l;var nt = ny - y + t;dv.style.left = nl + 'px';dv.style.top = nt + 'px';}

3.鼠标抬起事件

dv.onmouseup = function() {//开关关闭isDown = false;}

4.完整代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>元素拖拽</title>
<style>#dv {width:100px;height:100px;background-color:blue;/* border-radius:50%; */position:absolute;
}</style>
</head><body><div id="dv"></div><script>var dv = document.getElementById('dv');var x = 0;var y = 0;var l = 0;var t = 0;var isDown = false;//鼠标按下事件dv.onmousedown = function(e) {//鼠标获取x坐标和y坐标x = e.clientX;y = e.clientY;// console.log('一开始鼠标的坐标'+x);// console.log('一开始鼠标的坐标'+y);//获取左部和顶部的偏移量l = dv.offsetLeft;t = dv.offsetTop;//开关打开isDown = true;}//鼠标移动window.onmousemove = function(e) {if (isDown == false) {return;}//获取x和yvar nx = e.clientX;var ny = e.clientY;//计算移动后的左偏移量和顶部的偏移量//nx-x算的是是移动了多少，加上l之后的结果就是此时div的左部的偏移量（坐标）var nl = nx - x + l;var nt = ny - y + t;dv.style.left = nl + 'px';dv.style.top = nt + 'px';}//鼠标抬起事件dv.onmouseup = function() {//开关关闭isDown = false;}</script></body>
</html>

总结

以上所述是原生js实现拖拽功能基本思路详解，希望对大家有所帮助！

原生js实现元素拖拽onmousedown/onmousemove/onmouseup相关推荐

js控制鼠标移动_原生JS封装可拖拽效果
项目代码已上传码云:小朋友/JavaScript 封装可拖拽特效访问该URL可查看效果:http://is666a.gitee.io/javascript_drag/ https://www.zhi ...
JS实现元素拖拽，简单悬浮框实现
初学JavaScript,首次使用CSDN写博客,就当做自己的笔记本记录一下心得. 偶然了解到放大缩小拖拽这个功能,感兴趣就摸索着写了一个粗略的.实际功能还有许多问题和未优化的细节问题,仅作为学习练习 ...
dom 元素拖拽实现
文章目录原生 JS 实现 div 拖拽 HTML 拖拽 API REF 之前找实习的时候,面试官出了道 "原生 JS 实现 div 元素拖拽",当时实现了个大概,不过很多细节 ...
js实现鼠标拖拽功能基本思路
如果要设置物体拖拽,那么必须使用三个事件,并且这三个事件的使用顺序不能颠倒. onmousedown:鼠标按下事件 onmousemove:鼠标移动事件 onmouseup:鼠标抬起事件拖拽的基本原 ...
图片img或者含有img元素拖拽时的阴影效应问题
<body><img src="地鼠洞.jpg" alt=" ...
DOM实现元素拖拽，滚轮事件和特效动画缓冲运动处理
目录元素拖拽实现(点击拖动可视屏幕任意位置) DOM滚轮事件处理滚轮事件绑定滚轮事件方向滚轮事件兼容滚轮缩放图片案例实现特效动画缓冲运动单向缓冲运动反复缓冲运动简单的封装透明度处 ...
图片img或者含有img元素拖拽时，或者scale缩放时产品的阴影效应问题
图片img或者含有img元素拖拽时,或者用scale缩放时产品的阴影效应问题 html中有图片img或者含有img元素拖拽时,或者scale缩放时产品的阴影效应问题,也就是图片重影, 另外使用scal ...
html点击控制盒子左右移动,JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例...
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例发布时间:2020-10-04 12:47:25 来源:脚本之家阅读:121 作者:s_psycho 本文实例讲述了JS实现鼠标拖拽盒子移动及右键 ...
实现元素拖拽放大缩小_Vue实战067：DOM元素拖拽效果的实现
DOM元素拖拽效果: 当鼠标选中目标元素之后可以将其拖放至指定区域的任意位置,实现的思路主要是通过鼠标事件按下.移动.抬起,摁下鼠标时记录鼠标位置以及元素位置并算出鼠标相对元素的位置,在拖拽时记下当前 ...

原生js实现元素拖拽onmousedown/onmousemove/onmouseup

文章目录

前言

一、实现思路

二、具体步骤

1.鼠标在元素上按下时

2.鼠标拖拽元素时

3.鼠标抬起事件

4.完整代码

总结

原生js实现元素拖拽onmousedown/onmousemove/onmouseup相关推荐

最新文章

热门文章