广告区域的拖动功能

快来打我* 2022-05-19 08:55 218阅读 0赞

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

效果图：

初始进入页面的效果

![70][]

鼠标拖动后的效果

![70 1][]

解决思路：

上面已经讲了关键的三个事件。然后就讲解实现这三个事件的思路。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>

[70]: /images/20220519/ab4cbe1e4418433cbff363b35ea3812e.png
[70 1]: /images/20220519/4fba44945ed54d40a4bec2f1e5c3db41.png