javascript之div的拖拽

叁歲伎倆 2022-04-18 05:11 265阅读 0赞

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style>
    			#box1{
    				width: 100px;
    				height: 100px;
    				background-color: red;
    				position: absolute;
    			}
    			
    		</style>
    		<script>
    			window.onload = function(){
    			var box1 = document.getElementById("box1");
    			  //为鼠标绑定一个按下事件
    			  box1.onmousedown = function(event){
    			  	 	event = event||window.event;
    			  	 	var ol = event.clientX - box1.offsetLeft;
    			  	 	var ot = event.clientY - box1.offsetTop;
    			  	
    			  	
    			  	
    			    document.onmousemove = function(event){
    				  	  	event = event||window.event;
    				  	  	var x = event.clientX-ol;
    				  	  	var y = event.clientY-ot;
    				  	  	//修改box的位置
    				  	  	box1.style.left = x+"px";
    				  	  	box1.style.top = y+"px";
    			  	};
    			  };
    			 document.onmouseup = function(){
    			  	 //取消事件     在原地 
    			  	  document.onmousemove = null;
    			  	  document.onmouseup;
    			  }
    			};      
    			
    		</script>
    	</head>
    	<body>
    		<div id="box1"></div>
    	</body>
    </html>

发表评论取消回复

表情：

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

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

相关阅读

相关拖拽div

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

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

相关 JS拖拽div（移动）

//获取元素 var dv = document.getElementById('dv'); var x = 0; var y = 0; var l = 0;

素颜马尾好姑娘i/ 2023年06月30日 02:20/ 0 赞/ 45 阅读

相关用js拖拽div

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

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

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

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

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

相关 Jquery实现div拖拽

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

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

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

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

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

相关 js拖拽div移动

js拖拽div移动,就是鼠标点击住div，根据鼠标的位置来改变div的位置如有转载，请标明来自此出处http://blog.csdn.net/qxs965266509，必

拼搏现实的明天。/ 2022年05月13日 00:08/ 0 赞/ 305 阅读

相关 javascript之div的拖拽

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

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

相关 javascript拖拽之从浏览器外拖拽（drag）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

今天药忘吃喽~/ 2021年11月01日 05:40/ 0 赞/ 590 阅读

相关 js拖拽div例子

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

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