一个简单的拖动层(兼容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>

你可能感兴趣的:(一个简单的拖动层(兼容IE,FF))