首页 > 代码库 > Javascript 事件对象进阶（一）拖拽的原理

Javascript 事件对象进阶（一）拖拽的原理

2024-07-08 18:38:22   222人阅读

拖拽原理

  • 鼠标和Div的相对距离不变
  • 三大事件
  • 把拖拽加到document上
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style>#div1 {width: 100px; height: 100px; background: red; position: absolute;}</style><script>window.onload = function() {		/*	onmousedown : 选择元素	onmousemove : 移动元素	onmouseup 	: 释放元素	*/		var oDiv = document.getElementById(‘div1‘);		oDiv.onmousedown = function(ev) {		var ev = ev || event;				var disX = ev.clientX - this.offsetLeft;		var disY = ev.clientY - this.offsetTop;				document.onmousemove = function(ev) {			var ev = ev || event;						oDiv.style.left = ev.clientX - disX + ‘px‘;			oDiv.style.top = ev.clientY - disY + ‘px‘;					}				document.onmouseup = function() {			document.onmousemove = document.onmouseup = null;		}			}	}</script></head><body>	<div id="div1"></div>    <div style="width: 100px; height: 100px; background: green; position: absolute; left: 400px; top: 200px;"></div></body></html>

 

 

 

 


联系
我们