接在题目后:新的div被拖动,放开左键,新的div消失,原div出现在要拖动到的位置
原来是一开始创建一个新的div,隐藏他,按下左键时,显示他。
我现在想在按下左键时才创建新的div,松开时,去除他。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<div>不是获取我</div>
<div id="_this">
<span>
来获取我的内容
</span>
</div>
<div id="_that">
<span>
第三个div
</span>
</div>
</body>
<script>
var a = false;
var offset;
var offset2;
//第二个div
var b=document.getElementById('_this');
b.style.width='200px';
b.style.height='200px';
b.style.position='absolute';
b.style.backgroundColor="#666";
b.style.cssFloat='left';
//第二个div中的span
var spa=b.getElementsByTagName('span');
var spa0=spa.item(0);
spa0.style.width='200px';
spa0.style.height='30px';
spa0.style.backgroundColor="red";
spa0.style.display='inline-block';
//第三个div
var div3=document.getElementById('_that');
div3.style.width='200px';
div3.style.height='200px';
div3.style.position='absolute';
div3.style.backgroundColor="#666";
div3.style.cssFloat='left';
div3.style.left='500px';
//第三个div中的span
var div3_spa=div3.getElementsByTagName('span');
var div3_spa0=div3_spa.item(0);
div3_spa0.style.width='200px';
div3_spa0.style.height='30px';
div3_spa0.style.backgroundColor="red";
div3_spa0.style.display='inline-block';
//接收虚框
var ChangeAll;
window.divChange=document.createElement('div');
divChange.setAttribute('id','Change');
divChange.style.border='1px black solid';
divChange.style.width='200px';
divChange.style.height='200px';
divChange.style.position='absolute';
document.body.appendChild(divChange);
ChangeAll=document.getElementById('Change');
ChangeAll.style.display='none';
div3_spa0.onmousedown=mouseDown;
spa0.onmousedown=mouseDown;
function mouseDown(event){
//虚框
ChangeAll.style.display='inline-block';
a = true;
window.id=this.parentElement;
offset = {
x:event.pageX-id.offsetLeft,
y:event.pageY-id.offsetTop
}
ChangeAll.onmousedown=function mouseDown2(event){
offset2={
x:event.pageX-Change.offsetLeft,
y:event.pageY-Change.offsetTop
}
}
}
ChangeAll.onmouseup=function(event){
a=false;
var d= event.pageX;
var e=event.pageY;
id.style.left=(d-offset.x)+"px";
id.style.top=(e-offset.y)+"px";
ChangeAll.style.display='none';
}
window.onmousemove=function(event){
if (!a)
return;
var d= event.pageX;
var e=event.pageY;
Change.style.left=(d-offset.x)+"px";
Change.style.top=(e-offset.y)+"px";
}
</script>
</html>