<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<style>
body{ background:#e3e9f9;}
.backed{ 1082px;}
.backed div{display:block; float:left;}
.block1{ background:url(lc_01.gif) no-repeat; 504px; height:460px;}
.block2{ background:url(lc_02.gif) no-repeat; 576px; height:460px;}
.block3{ background:url(lc_03.gif) no-repeat; 504px; height:450px;}
.block4{ background:url(lc_04.gif) no-repeat; 576px; height:450px;}
.block5{ background:url(lc_05.gif) no-repeat; 504px; height:432px;}
.block6{ background:url(lc_06.gif) no-repeat; 576px; height:432px;}
.block7{ background:url(lc_07.gif) no-repeat; 504px; height:548px;}
.block8{ background:url(lc_08.gif) no-repeat; 576px; height:548px;}
</style>
</head>
<body onload="ok()">
<form id="form1" runat="server">
<div>
<script type="text/javascript">
var x,y,z,down=false,obj
function init(){
obj=event.srcElement //事件触发对象
obj.setCapture() //设置属于当前对象的鼠标捕捉
z=obj.style.zIndex //获取对象的z轴坐标值
//设置对象的z轴坐标值为100，确保当前层显示在最前面
obj.style.zIndex=100
x=event.offsetX //获取鼠标指针位置相对于触发事件的对象的X坐标
y=event.offsetY //获取鼠标指针位置相对于触发事件的对象的Y坐标
down=true //布尔值，判断鼠标是否已按下，true为按下，false为未按下
}
function moveit(s){
//判断鼠标已被按下且onmouseover和onmousedown事件发生在同一对象上
if(down&&event.srcElement==obj){
with(obj.style){
/*设置对象的X坐标值为文档在X轴方向上的滚动距离加上当前鼠标指针相当于文档对象的X坐标值减鼠标按下时指针位置相对于触发事件的对象的X坐标*/
posLeft=document.body.scrollLeft+event.x-x
/*设置对象的Y坐标值为文档在Y轴方向上的滚动距离加上当前鼠标指针相当于文档对象的Y坐标值减鼠标按下时指针位置相对于触发事件的对象的Y坐标*/
posTop=document.body.scrollTop+event.y-y
var i=s;
document.getElementById("Lsize"+i).value=posLeft
document.getElementById("Tsize"+i).value=posTop
}
}
}
function stopdrag(){
//onmouseup事件触发时说明鼠标已经松开，所以设置down变量值为false
down=false
obj.style.zIndex=z //还原对象的Z轴坐标值
obj.releaseCapture() //释放当前对象的鼠标捕捉
}
function ok(){
for (var i=1;i<=2;i++){
var l=document.getElementById('Lsize'+i).value;
var t=document.getElementById('Tsize'+i).value;
if(l!=""&&t!="")
{
document.getElementById('Layer'+i).style.left=l+'px';
document.getElementById('Layer'+i).style.top=t+'px';
}
}
}
</script>
<div id="Layer1" onmousedown="init()" onmousemove="moveit(1)" onmouseup="stopdrag()" runat="server" style="left:150px; top:230px;background-color:#FFCCCC; 110px; height:80px; z-index:1; position:absolute;">aaa</div>
<div id="Layer2" onmousedown="init()" onmousemove="moveit(2)" onmouseup="stopdrag()" runat="server" style="left:300px; top:230px;background-color:#FFCCCC; 110px; height:80px; z-index:1; position:absolute;">bbb</div>
<input type="text" id="Lsize1" runat="server" style="display:none;"/>
<input type="text" id="Tsize1" runat="server" style="display:none;"/>
<input type="text" id="Lsize2" runat="server" style="display:none;"/>
<input type="text" id="Tsize2" runat="server" style="display:none;"/>
<div class="backed">
<div class="block1"></div>
<div class="block2"></div>
<div class="block3"></div>
<div class="block4"></div>
<div class="block5"></div>
<div class="block6"></div>
<div class="block7"></div>
<div class="block8"></div>
</div>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</div>
</form>
</body>