JS代码实现拖拽（拖拽三剑客）

客官°小女子只卖身不卖艺 2022-03-20 05:12 474阅读 0赞

我们要实现对一个元素的拖拽，先假设在页面中有一个div，我们对div有一个简单的css样式，并且将div绝对定位。  
在标题中提到了实现拖拽的“三剑客”，也就是实现拖拽的三个通用步骤，相信大家在学会这三个步骤之后都能够实现元素在页面上的拖拽功能。  
下面直接上代码：

<!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="UTF-8">
    		<title>Document</title>
    		<style>
    			#div1{width: 100px; height: 100px; background-color: red; position: absolute; left: 100px; top: 100px}
    		</style>
    		<script>
    			window.onload = function(){
    				var oDiv = document.getElementById("div1");
    
    				var offsetX = 0;
    				var offsetY = 0;
    				//第一步：当对div进行鼠标点击事件的时候，记录下当前鼠标的位置
    				oDiv.onmousedown = function(ev){
    					var e = ev || window.event;
    					offsetX = e.clientX - oDiv.offsetLeft;
    					offsetY = e.clientY - oDiv.offsetTop;
    					//第二步：当我们在document下对div进行拖动的时候，给div的left和right进行定位
    					document.onmousemove = function(ev){
    						var e = ev || window.event;
    
    						oDiv.style.left = e.clientX - offsetX + 'px';
    						oDiv.style.top = e.clientY - offsetY + 'px';
    					}
    				}
    				//第三步：在document下当鼠标抬起的时候，取消鼠标跟随事件
    				document.onmouseup = function(){
    					document.onmousemove = null;
    				}
    			}
    		</script>
    	</head>
    	<body>
    		<div id = 'div1'></div>
    	</body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，474人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS 拖拽事件

1.drag等拖拽事件 > 拖放是由拖动与释放两部分组成，拖放事件也分为被拖动元素的相关事件，和容器的相关事件。被拖动元素的相关事件如下所示：被拖动元素相关事件:

蔚落/ 2024年03月02日 10:40/ 0 赞/ 64 阅读

相关 JS实现窗口拖拽

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

ゞ浴缸里的玫瑰/ 2023年07月24日 08:12/ 0 赞/ 53 阅读

相关 js拖拽

拖拽使用的三个事件 onmousedown //鼠标按下 onmousemove //鼠标移动 onmouseup //鼠标抬起

怼烎@/ 2023年06月09日 04:59/ 0 赞/ 7 阅读

相关拖拽

<!DOCTYPE html> <html> <head> <meta charset="UTF-8">

梦里梦外;/ 2022年06月16日 12:47/ 0 赞/ 321 阅读

相关 JS——拖拽封装

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

绝地灬酷狼/ 2022年06月03日 04:54/ 0 赞/ 257 阅读

相关 js实现拖拽事件

HTML <body> <div></div> </body> CSS div{ position: absolute

「爱情、让人受尽委屈。」/ 2022年05月29日 08:24/ 0 赞/ 299 阅读

相关 JS 拖拽

实现后效果 ![70][] 实现原理： 1. 在允许拖拽的节点元素上，监听mousedown(按下鼠标按钮)事件，鼠标按下后，事件触发 2. 监听mousemov

╰半夏微凉°/ 2022年05月22日 08:50/ 0 赞/ 327 阅读

相关 JQ实现拖拽（三剑客）

之前发布了一个实现拖拽的JS代码，现在应个别同学的要求，发一份JQ版本的代码。实现的步骤同样还是三剑客废话不多说，直接上代码： <!DOCTYPE htm

我会带着你远行/ 2022年03月20日 06:10/ 0 赞/ 247 阅读

相关 JS代码实现拖拽（拖拽三剑客）

我们要实现对一个元素的拖拽，先假设在页面中有一个div，我们对div有一个简单的css样式，并且将div绝对定位。在标题中提到了实现拖拽的“三剑客”，也就是实现拖拽的三个

客官°小女子只卖身不卖艺/ 2022年03月20日 05:12/ 0 赞/ 475 阅读

相关 js拖拽封装

废话不多说，直接上代码： drag: function (id) { let isDown = false; let

雨点打透心脏的1/2处/ 2021年09月19日 15:02/ 0 赞/ 426 阅读