30、JavaScript中简单拖拽DIV的实现

喜欢ヅ旅行 2022-09-21 11:51 270阅读 0赞

1、DIV拖拽的实现  
     1.1 简易拖拽  
             .拖拽原理  
                --距离不变  
                --三个事件  
                   onmousedown  存储距离,并发生onmousemove  
                   onmousemove  根据距离，计算div最新的位置  
                   onmouseup    停止拖拽的发生,也就是当onmouseup时,onmousemove取消掉  
                 --事件之间的关系  
                   1. 鼠标的onmousedown没按下之前,鼠标的onmousemove移动事件不会发生

1.1 修改为，在onmousedown的时候，再添加onmousemove事件

2、代码

2.1 css代码

<style type="text/css">
    			* {
    				padding: 0px;
    				margin: 0px;
    			}
    			
    			#myDiv {
    				width: 100px;
    				height: 100px;
    				background: red;
    				position: absolute;
    			}
    		</style>

2.2 JavaScript代码

<script type="text/javascript">
    			window.onload = function() {
    				var oDiv = document.getElementById("myDiv");
    				//保存鼠标位置disX，距离DIV左边边框的距离，就是，event.clientX - oDiv.offsetLeft;
    				var disX = 0;
    				//保存鼠标位置disY，距离DIV上边边框的距离，就是，event.clientY - oDiv.offsetTop;
    				var disY = 0;
    				/*1、当鼠标按下的时候，保存下当前DIV的top和left的数值*/
    				oDiv.onmousedown = function(ev) {
    					var oEvent = ev || event;
    					disX = oEvent.clientX - oDiv.offsetLeft;
    					disY = oEvent.clientY - oDiv.offsetTop;
    					oDiv.style.cursor = "pointer";
    					/*2、当鼠标移动的时候，计算DIV新的位置*/
    					document.onmousemove = function(ev) {
    							var oEvent = ev || event;
    							var left = oEvent.clientX - disX;
    							var top = oEvent.clientY - disY;
    							/*可是区域的宽度大小*/
    							var clientWidth = document.documentElement.clientWidth;
    							var clientHeight = document.documentElement.clientHeight;
    							/*4、进行边界的判断*/
    							/*检测左边的边界*/
    							if (left < 0) {
    								left = 0;
    							}
    							/*检测右边的边界*/
    							else if (left > clientWidth - oDiv.offsetWidth) {
    								left = clientWidth - oDiv.offsetWidth;
    							}
    							/*上边界的检测*/
    							if (top < 0) {
    								top = 0;
    							}
    							/*下边界的检测*/
    							else if (top > clientHeight - oDiv.offsetHeight) {
    								top = clientHeight - oDiv.offsetHeight;
    							}
    							oDiv.style.left = left + "px";
    							oDiv.style.top = top + "px";
    						}
    						//3、当鼠标抬起来的时候,让onmousemove取消
    					document.onmouseup = function() {
    						//3.1 取消onmousemove事件
    						oDiv.style.cursor = "default";
    						document.onmousemove = null;
    						document.onmouseup = null;
    					}
    				}
    			};
    		</script>

2.3 html代码

<body>
    		<div id="myDiv">
    		</div>
    	</body>

发表评论取消回复

表情：

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

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

相关阅读

相关拖拽div

被拖拽元素需要绝对定位。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <

怼烎@/ 2023年10月06日 15:32/ 0 赞/ 117 阅读

相关用js拖拽div

描述：拖拽div元素，主要用到以下三个事件 onmousedown onmousemove onmouseup 当拖拽网页中的内容时，浏览器会默认搜索引擎

ゝ一纸荒年。/ 2022年11月29日 14:30/ 0 赞/ 333 阅读

相关 35、JavaScript中DIV的完美拖拽---解决拖拽中的文字选中的问题

1、拖拽中的文字选中问题 1.1 阻止默认事件 1.2 IE下拖拽有问题 -- 事件捕获 2、代码

蔚落/ 2022年09月21日 13:04/ 0 赞/ 358 阅读

相关 30、JavaScript中简单拖拽DIV的实现

1、DIV拖拽的实现 1.1 简易拖拽 .拖拽原理 --距离不变

喜欢ヅ旅行/ 2022年09月21日 11:51/ 0 赞/ 271 阅读

相关 Jquery实现div拖拽

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR

ゞ浴缸里的玫瑰/ 2022年06月08日 06:05/ 0 赞/ 282 阅读

相关 JavaScript 实现简单的拖拽效果

之前一直对js中常用坐标属性不是很熟，特意花了一个下午的时间研究，并写了一个实现元素拖动的函数，在这边分享一下。（如果有不对的地方，还请批评指正~）先介绍一下实现

Myth丶恋晨/ 2022年06月07日 00:59/ 0 赞/ 327 阅读

相关原生JavaScript实现div拖拽效果

实现思路：（1）首先改变被拖动元素的布局属性为“position：absolute”，其父框为“position：relative”；（2）捕捉鼠标事件“mo

分手后的思念是犯贱/ 2022年05月24日 03:43/ 0 赞/ 427 阅读

相关 JavaScript 拖拽效果实现

我们在访问一些网站时，会发现有些内容是可以拖拽的，比较方便，那么使用JS怎么实现呢？今天结合代码展示下拖拽效果的实现。这里需要先熟悉下几个JS事件： onmouse

淩亂°似流年/ 2022年05月17日 07:39/ 0 赞/ 372 阅读

相关 javascript之div的拖拽

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

叁歲伎倆/ 2022年04月18日 05:11/ 0 赞/ 313 阅读

相关 js拖拽div例子

1.demo.html \-------------------------------- <!doctype html> <!--\[if IE 7 \]>

客官°小女子只卖身不卖艺/ 2021年11月01日 03:34/ 0 赞/ 430 阅读