JS-拖拽-碰撞-封装

最新推荐文章于 2021-06-21 16:11:15 发布

原创最新推荐文章于 2021-06-21 16:11:15 发布 · 713 阅读

CC 4.0 BY-SA版权

本文介绍了一种使用JavaScript实现的网页元素拖拽功能，并包含了两个元素间的碰撞检测逻辑。通过onmousedown、onmousemove和onmouseup事件实现了div元素的拖拽效果，并在发生碰撞时改变背景颜色。

<Html>
	<head>
		<style>
			*{margin: 0;padding: 0;}
		</style>
		<script type="text/javascript">
			
			//函数加载入口
			window.onload = function()
			{	
				
				var oDiv1 = document.getElementById('div1');
				var oDiv2 = document.getElementById("div2");

				var offsetX = 0;
				var offsetY = 0;


				oDiv1.onmousedown = function(ev)
				{

					var oEvent = ev || window.event;
					offsetX = oEvent.clientX - this.offsetLeft;
					offsetY = oEvent.clientY - this.offsetTop;

					//当鼠标移动
					document.onmousemove = function(ev)
					{	
						var oEvent = ev || window.event;
						var l  = oEvent.clientX - offsetX;
						var r  = oEvent.clientY - offsetY;

						
						l <=0 && (l = 0);

						l >= document.documentElement.clientWidth - oDiv1.offsetWidth && (l=document.documentElement.clientWidth - oDiv1.offsetWidth);

						r <=0 && (r = 0);

						r >= document.documentElement.clientHeight - oDiv1.offsetHeight&&(r=document.documentElement.clientHeight-oDiv1.offsetHeight);


						var ol1 = oDiv1.offsetLeft;
						var ol2 = oDiv1.offsetLeft + oDiv1.offsetWidth; 
						var ot1 = oDiv1.offsetTop;
						var ot2 = oDiv1.offsetTop  + oDiv1.offsetHeight;

						var nl1 = oDiv2.offsetLeft;
						var nl2 = oDiv2.offsetLeft + oDiv2.offsetWidth;
						var nt1 = oDiv2.offsetTop;
						var nt2 = oDiv2.offsetTop + oDiv2.offsetHeight;

						
						//碰撞检测
						if (!(ol1 > nl2 || ol2 < nl1 || ot2 < nt1 || ot1 > nt2 ))
						{
							oDiv2.style.backgroundColor="pink";
						} 

	
						//(ol1 < nl2 || ol2 > nl1 || ot1 < nt2 || ot2 > nt1) &&  (alert(1));


						oDiv1.style.left = l +'px';
						oDiv1.style.top  = r +'px';
					};

					document.onmouseup = function()
					{
						document.onmouseup = null;
						document.onmousemove = null;

						this.releaseCapture && (this.releaseCapture());
					};

					this.setCapture && (this.setCapture());

					return false; //取消默认事件
				}

				
			

				var Toos = {	
					//拖动函数
					Drag:function(obj)
					{	
						var offsetX = offsetY =0;
						obj.drag.onmousedown = function(ev)
						{
							var oEvent = ev || window.event;
							offsetX = oEvent.clientX - this.offsetLeft;
							offsetY = oEvent.clientY - this.offsetTop;

							document.onmousemove = function(ev){
								var oEvent = ev || window.event;
								obj.drag.style.left = oEvent.clientX - offsetX +'px';
								obj.drag.style.top = oEvent.clientY - offsetY +'px';
							}
							document.onmouseup = function(){	
								document.onmousemove = null;
								document.onmouseup = null;


								//IE问题
								this.releaseCapture && this.releaseCapture();
							};

							//IE问题
							this.setCapture &&  this.setCapture();

							return false;
						}
					}
				};

				Toos.Drag({drag:document.getElementById("div1")});

			};





		</script>
	</head>
<body>
	<div style="width:100px;height:100px;border:solid 1px;position:absolute;background:red;" id="div1"></div>

	<div style="width:100px;height:100px;border:solid 1px;position:absolute;background:blue; left:300px;top:300px;" id="div2"></div>

</body>
</html>