<h1>定义一个可以移动的div层</h1>
<hr />
<button onclick='displayDiv()'>显示层</button> <button onclick='closeDiv()'>隐藏层</button>
<br />
<div id="Layer1" name="assisSynData" style="border:1px;border-style:solid;z-index:10;position:absolute;margin:1px;width:600px;height:200px;overflow:hidden;">
<iframe style="position:absolute;z-index:-1;width:100%;height:100%;top:0;left:0;scrolling:no;" frameborder="0" src="about:blank"></iframe>
<div style="background-color:blue;width:100%;height:20px;text-align:right;" onmousedown=MouseDownToRemove(this) onmousemove=MouseMoveToRemove(this) onmouseup=MouseUpToRemove(this) ><a href="#" onclick="closeDiv()">关闭</a></div>
<div style="background-color:#cccccc;width:100%;height:180px;overflow:scroll;margin:1px;">
aaaaaaa<br>
bbbbbbb<br>
ccccccc<br>
ccccccc<br>
ccccccc<br>
cccccccqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqcccccccqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq
aaaaaaa<br>
aaaaaaa<br>
bbbbbbb<br>
ccccccc<br>
ccccccc<br>
ccccccc<br>
cccccccqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqcccccccqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq
aaaaaaa<br>
</div>
</div>
2.javascript代码：
<script type="text/javascript" charset="UTF-8">
var beginMoving=false;
var beginResizing=false;
//鼠标按下时
function MouseDownToRemove(obj){
obj.mouseDownX=event.clientX;//时间发生时，鼠标的X坐标，浏览器的工具栏和滚动条不计算在内
obj.mouseDownY=event.clientY;//时间发生时，鼠标的Y坐标，浏览器的工具栏和滚动条不计算在内
//offsetLeft :Retrieves the calculated left position of the object relative to the layout or coordinate parent,
//as specified by the offsetParent property.
obj.Layer1=Layer1.offsetLeft;
obj.offsetParentOffsetTop=Layer1.offsetTop;
beginMoving=true;
//setCapture:Sets the mouse capture to the object belonging to the current document,
//Once mouse capture is set to an object, that object fires all mouse events for the document
obj.setCapture();
}
//鼠标移动时
function MouseMoveToRemove(obj){
if(!beginMoving) return false;
if(event.x>1) //防止被移出页面之外，造成无法移回的后果
Layer1.style.left = obj.Layer1+(event.x-obj.mouseDownX);
if(event.y>1)
Layer1.style.top = obj.offsetParentOffsetTop+(event.y-obj.mouseDownY);;
}
//鼠标松开，释放时
function MouseUpToRemove(obj){
obj.releaseCapture();////Removes mouse capture from the object in the current document
beginMoving=false;
}
//close layer
function closeDiv(){
document.getElementById('Layer1').style.display='none';
}
//display layer
function displayDiv(){
document.getElementById('Layer1').style.display='block';
}
</script>
|
