<!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{ 1000px; margin:10px auto;}
.box{ position: absolute; top:0; left:40%; 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>