一个简单的拖动层(兼容IE,FF)
Code<!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>
<title>拖动层</title>
<style type="text/css">
.main
{
position: absolute;
background-color: #fff;
top: 100px;
left: 100px;
z-index: 101;
border: solid 1px #ccc;
}
.titlebar
{
background-color: #ccc;
cursor: move;
height: 20px;
color: #fff;
font-size: 13px;
padding-top: 5px;
padding-left: 10px;
}
</style>
</head>
<body>
<div id="main" class="main" style="width: 500px; height: 350px;">
<div id="titlebar" class="titlebar">
拖动层
</div>
<div id="Div1" class="main" style="width: 200px; height: 50px;">
<div id="Div2" class="titlebar">
拖动层2
</div>
</div>
</div>
<script type="text/javascript">
new drag("main", "titlebar");
new drag("Div1", "Div2");
function drag(main, titlebar) {
var obj = document.getElementById(main);
var title = document.getElementById(titlebar);
if(obj && title)
{
var posX;
var posY;
var offset = 10;
var mousemove = function(evt) {
if (evt == null) evt = window.event;
var left = evt.clientX - posX;
var top = evt.clientY - posY;
var limitLeft = 0;
var limitTop = 0;
if(obj.parentNode.nodeName != "BODY")
{
limitLeft = obj.parentNode.clientWidth - obj.clientWidth - offset;
if(limitLeft < left)
{
left = limitLeft;
}
limitTop = obj.parentNode.clientHeight - obj.clientHeight - offset;
if(limitTop < top)
{
top = limitTop;
}
}
else
{
limitLeft = window.screen.availWidth - obj.clientWidth - offset;
if(limitLeft < left)
{
left = limitLeft;
}
limitTop = window.screen.availHeight - obj.clientHeight - offset;
if(limitTop < top)
{
top = limitTop;
}
}
if(left < offset)
{
left = offset;
}
if(top < offset)
{
top = offset;
}
obj.style.left = left + "px";
obj.style.top = top + "px";
}
title.onmousedown = function(evt) {
if (!evt) evt = window.event;
posX = evt.clientX - obj.offsetLeft;
posY = evt.clientY - obj.offsetTop;
document.onmousemove = mousemove;
}
document.onmouseup = function() {
document.onmousemove = null;
}
}
else
{
alert("参数错误!");
}
}
</script>
</body>
</html>
