广告区域的拖动功能_广告拖放-CSDN博客

本文链接：https://blog.csdn.net/sqhren626232/article/details/81171227

广告区域的拖动功能就是一块可以拖动的可以放置广告的地方。其中关键点在于鼠标的三个事件onmousedown，onmousemove和onmouseup。另外一个关键点在于获取鼠标按下时，鼠标离广告区域的边框的距离。依旧是先上效果图，再上解决思路，最后上源代码。

效果图：

初始进入页面的效果

鼠标拖动后的效果

解决思路：

上面已经讲了关键的三个事件。然后就讲解实现这三个事件的思路。1、鼠标按下事件onmousedown，此时需要取得鼠标离广告区域左边的距离ox和上边的距离oy，并把鼠标移动事件生效标志moveFlag置为true。因为当鼠标弹起之后移动效果要消失，所以定义了一个全局变量moveFlag。在鼠标按下时获取鼠标水平坐标var cx=e.clientX;和垂直坐标var cy=e.clientY;。以及广告区域距离浏览器左边的距离var ol=adInfo.offsetLeft;以及顶部的距离var ot=adInfo.offsetTop;。然后相减便是鼠标距离广告区域左上角的距离。2、鼠标移动时onmousemove获取鼠标的坐标，然后减去ox，oy并赋值给广告区域的left和top。这样广告区域就会跟着鼠标移动了。3、最后鼠标弹起时onmouseup需要把moveFlag赋值为false，这样鼠标弹起时在拖动鼠标对广告区域也不会有影响了。4、然后广告区域的三个事件分别调用这单个方法就够了。

代码如下，各位朋友自己尝试吧。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>广告区域的拖动功能</title>
<style type="text/css">
.adStyle{position: absolute;top: 180px;left: 100px;background-color: #EE9A00;color: white;width: 200px;padding: 5px;}
</style>
</head>
<body>
	<div style="position: absolute;top: 50px;left: 100px;width: 900px;height: 300px;background-color: #87CEEB;padding: 5px;">
		<div style="width: 900px;text-align: center;">算法</div>
		<div style="width: 900px;text-indent: 2em;">算法（Algorithm）是指解题方案的准确而完整的描述，是一系列解决问题的清晰指令，
		算法代表着用系统的方法描述解决问题的策略机制。也就是说，能够对一定规范的输入，在有限时间内获得所要求的输出。如果一个算法有缺陷，或不适合于某个问题，
		执行这个算法将不会解决这个问题。不同的算法可能用不同的时间、空间或效率来完成同样的任务。一个算法的优劣可以用空间复杂度与时间复杂度来衡量。</div>
	</div>
	<div id="adInfo" class="adStyle" onmousedown="mousDown(event)" onmousemove="mousMove(event)" onmouseup="mousUp(event)">
		同一问题可用不同算法解决，而一个算法的质量优劣将影响到算法乃至程序的效率。算法分析的目的在于选择合适算法和改进算法。一个算法的评价主要从时间复杂度和空间复杂度来考虑。
	</div>
</body>
<script type="text/javascript">
	var ox,oy;//鼠标距离可拖动元素左边和上边的距离
	var moveFlag=false;//鼠标移动事件生效标志
	function mousDown(event){
		moveFlag=true;
		var e = event || window.event;
		var cx=e.clientX;	//鼠标的水平坐标
		var cy=e.clientY;	//鼠标的垂直坐标
		var adInfo=document.getElementById("adInfo");
		var ol=adInfo.offsetLeft;	//广告区域距离浏览器左边的距离
		var ot=adInfo.offsetTop;	//广告区域距离浏览器顶部的距离
		ox=cx-ol;
		oy=cy-ot;
	}
	function mousUp(event){
		moveFlag=false;
	}
	function mousMove(event){
		var e = event || window.event;
		var cx=e.clientX;
		var cy=e.clientY;
		var adInfo=document.getElementById("adInfo");
		if(moveFlag){
			adInfo.style.left=cx-ox;
			adInfo.style.top=cy-oy;
		}
	}
</script>
</html>