拖拽+重叠+虚线框(解决移动文字复制问题)


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>拖拽+重叠+虚线框(解决移动文字复制问题)</title>
<meta name="description" content="">
<meta name="keywords" content="">
<style>
	*{margin:0; padding:0;}
	.f-wrap{width: 1000px; margin:10px auto;}
	.box{ position: absolute; top:0; left:40%; width: 150px; height: 150px; color:#fff; text-align: center; line-height: 144px; font-size:26px; background-color: green; cursor: move;}
	.box1{ background-color: purple; top:200px; left:40%;}
	.newDiv{border:1px dotted red; position: absolute;}
</style>
<script>
	window.onload = function(){
		Drag('box');
		Drag('box1');
	}

	function Drag(id){
		var oDiv = document.getElementById(id);
		var oDiv1 = document.getElementById('box');
		var oDiv2 = document.getElementById('box1');
		oDiv.onmousedown = function(e){
			var e = e||event;
			var disX = e.clientX - oDiv.offsetLeft;
			var disY = e.clientY - oDiv.offsetTop;

			// 创建虚线框
			var newDiv = document.createElement('div');
			newDiv.className = 'newDiv';
			newDiv.style.width = oDiv.offsetWidth-2+'px';
			newDiv.style.height = oDiv.offsetHeight-2 +'px';
			newDiv.style.left = oDiv.offsetLeft +'px';
			newDiv.style.top = oDiv.offsetTop +'px';
			document.body.appendChild(newDiv);

			oDiv.style.filter='alpha(opacity=30)';
            oDiv.style.opacity=0.3;

			if(oDiv.setCapture){
				newDiv.onmousemove = fnMove;
				newDiv.onmouseup = fnUp;
				newDiv.setCapture();
			}else{
				document.onmousemove = fnMove;
				document.onmouseup = fnUp;
			}

			function fnMove(e){
				var e = e||event,
				// 鼠标位置距离物体的左側和上側的距离
                	l = e.clientX - disX,
                	t = e.clientY - disY;
                	scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft,
                	scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                var o1 = {
                		l:newDiv.offsetLeft,
                		r:newDiv.offsetLeft + newDiv.offsetWidth,
                		t:newDiv.offsetTop,
                		b:newDiv.offsetTop + newDiv.offsetHeight
	                },
	                o2 = {
                		l:oDiv2.offsetLeft,
                		r:oDiv2.offsetLeft + oDiv2.offsetWidth,
                		t:oDiv2.offsetTop,
                		b:oDiv2.offsetTop + oDiv2.offsetHeight
	                };
	            if(o1.r < o2.l || o1.l > o2.r || o1.b < o2.t || o1.t > o2.b){
	            	oDiv2.style.backgroundColor = 'purple';
	            }else{
	            	oDiv2.style.backgroundColor = 'pink';
	            }

                // 拖拽范围限定
                if(l<=10){
                    l=0;
                }else if(l>=document.documentElement.clientWidth + scrollLeft - newDiv.offsetWidth - 10){
                    l=document.documentElement.clientWidth +scrollLeft - newDiv.offsetWidth;
                }
                if(t<=10){
                    t=0;
                }else if(t>=document.documentElement.clientHeight + scrollTop - newDiv.offsetHeight - 10){
                    t=document.documentElement.clientHeight +scrollTop - newDiv.offsetHeight;
                }
				this.style.left = l+'px';
				this.style.top = t+'px';

			}
			function fnUp(){
				this.onmousemove = null;
				this.onmouseup = null;
				if(this.releaseCapture){
					this.releaseCapture();
				}

				oDiv.style.left = newDiv.offsetLeft +'px';
				oDiv.style.top = newDiv.offsetTop +'px';
				oDiv.style.filter='alpha(opacity=100)';
                oDiv.style.opacity=1;
				document.body.removeChild(newDiv);
			}
			return false;
		}

	}
</script>
</head>
<body>
<div class="f-wrap">
	<div id="box" class="box">1</div>
	<div id="box1" class="box box1">2</div>
	<h2>小苹果</h2>
	<p>我种下一颗种子</p>
	<p>最终长出了果实</p>
	<p>今天是个伟大日子</p>
	<p>摘下星星送给你</p>
	<p>拽下月亮送给你</p>
	<p>让太阳每天为你升起</p><br>

	<p>变成蜡烛燃烧自己</p>
	<p>仅仅为照亮你</p>
	<p>把我一切都献给你</p>
	<p>仅仅要你欢喜</p>
	<p>你让我每一个明天都</p>
	<p>变得有意义</p>
	<p>生命虽短爱你永远</p>
	<p>不离不弃</p><br>

	<p>你是我的小呀小苹果儿</p>
	<p>怎么爱你都不嫌多</p>
	<p>红红的小脸儿温暖我的心窝</p>
	<p>点亮我生命的火 火火火火</p>
	<p>你是我的小呀小苹果儿</p>
	<p>就像天边最美的云朵</p>
	<p>春天又来到了花开满山坡</p>
	<p>种下希望就会收获</p><br>

	<p>从不认为你讨厌</p>
	<p>你的一切都喜欢</p>
	<p>有你的每天都新奇</p>
	<p>有你阳光更灿烂</p>
	<p>有你黑夜不黑暗</p>
	<p>你是白云我是蓝天</p><br>

	<p>春天和你漫步在盛开的 花丛间</p>
	<p>夏天夜晚陪你一起看 星星眨眼</p>
	<p>秋天黄昏与你徜徉在 金色麦田</p>
	<p>冬天雪花飞舞有你 更加温暖</p><br>

	<p>你是我的小呀小苹果儿</p>
	<p>怎么爱你都不嫌多</p>
	<p>红红的小脸儿温暖我的心窝</p>
	<p>点亮我生命的火 火火火火</p>
	<p>你是我的小呀小苹果儿</p>
	<p>就像天边最美的云朵</p>
	<p>春天又来到了花开满山坡</p>
	<p>种下希望就会收获</p><br>

	<p>你是我的小呀小苹果儿</p>
	<p>怎么爱你都不嫌多</p>
	<p>红红的小脸儿温暖我的心窝</p>
	<p>点亮我生命的火 火火火火</p>
	<p>你是我的小呀小苹果儿</p>
	<p>就像天边最美的云朵</p>
	<p>春天又来到了花开满山坡</p>
	<p>种下希望就会收获</p>
</div>

</body>
</html>



posted @ 2014-08-03 18:17  hrhguanli  阅读(433)  评论(0编辑  收藏  举报