这个JS控制的可以随意拖动的层在IE6和7中正常，在FF和GG中不能动

<script type="text/javascript"> 
        var obj_moing = false;
        var obj_resize = false;
        var obj_Ofx = 0;
        var obj_Vfx = 0;
        var obj_Ofy = 0;
        var obj_Vfy = 0;
        function obj_down(id){//窗口在获得鼠标按下时触发
            if (obj_moing) { //如果正在拖动,那么返回
                return;
            }
            else {
                obj_Ofx = event.clientX; //获取鼠标在网页中的X坐标
                obj_Vfx = document.getElementById(id).offsetLeft; //获取窗口的左位置
                obj_Ofy = event.clientY; //获取鼠标在网页中的X坐标
                obj_Vfy = document.getElementById(id).offsetTop; //获取窗口的左位置
                document.getElementById(id).setCapture(); //锁住拖动的对象
                obj_moing = true; //设置为正在拖动
            }
        }
        function obj_up(id){//当鼠标弹起时触发
            if (obj_moing) {
                document.getElementById(id).releaseCapture();//释放锁住的对象
                obj_moing = false; //设置为不是正在拖动
            }
            if (obj_resize) {
                document.getElementById(id).style.cursor = "auto";//还原鼠标形状
                document.getElementById(id).releaseCapture();//释放锁住的对象
                obj_resize = false; //设置为不能缩放大小
            }
        }
        function obj_move(id){//当鼠标移动时触发
            if (obj_moing){
            var curX = event.clientX;
            var curY = event.clientY;
            var obj_lastx = obj_Vfx+curX-obj_Ofx;    //取得移动后的左位置
            var obj_lasty = obj_Vfy+curY-obj_Ofy;    //取得移动后的上位置
            if(obj_lastx <= 0){
                obj_lastx = 0;
            }
            if(obj_lasty <= 0){
                obj_lasty = 0;
            }
            document.getElementById(id).style.left = obj_lastx;    //设定移动后的位置
            document.getElementById(id).style.top = obj_lasty;    //设定移动后的位置        
        }
        if(obj_resize){
            if (event.clientX - parseInt(document.getElementById(id).offsetLeft) > 100 && event.clientY - parseInt(document.getElementById(id).offsetTop) > 100) {
                if (event.clientX - parseInt(document.getElementById(id).offsetLeft) < 1024 && event.clientY - parseInt(document.getElementById(id).offsetTop) < 768) {
                    document.getElementById(id).style.width = event.clientX - parseInt(document.getElementById(id).offsetLeft);
                    document.getElementById(id).style.height = event.clientY - parseInt(document.getElementById(id).offsetTop);
                    document.getElementById("div1td2").style.height = event.clientY - parseInt(document.getElementById(id).offsetTop) - 25;
                }
            }
        }
    }
    function obj_lsdown(id){
        var curX = event.clientX + document.documentElement.scrollLeft;
        var curY = event.clientY + document.documentElement.scrollTop;
        var moveallwidth = parseInt(document.getElementById(id).offsetLeft) + parseInt(document.getElementById(id).offsetWidth);
        var moveallheight = parseInt(document.getElementById(id).offsetTop) + parseInt(document.getElementById(id).offsetHeight);
        var moveleft = parseInt(moveallwidth) - parseInt(curX);
        var movetop = parseInt(moveallheight) - parseInt(curY);    
        if (moveleft <= 7 && moveleft >= 0 && movetop <= 7 && movetop >= 0) { //鼠标出现在窗口右下角
            document.getElementById(id).style.cursor="nw-resize";
            document.getElementById(id).setCapture(); //锁住缩放的对象
            obj_resize = true; //设置为正在缩放
        }    
    }
    </script>


<div id="div1" style="width:365px;height:221;top:67px;left:599px;zIndex:100;position:absolute;cursor:auto;" onmousedown="obj_lsdown('div1');" onmousemove="obj_move('div1');" onmouseup="obj_up('div1');">
            <table width="365" height="221" border="0" cellpadding="0" cellspacing="0" id="table1" style="table-layout:fixed;">
                <tr>
                    <td background="bianqian.png" id="div1td1" style="cursor:move;height:25px;" onmousedown="obj_down('div1');" >
                        <span><a href="#">拖动拉缩窗体</a></span>                    </td>
                </tr>
  </table>
</div>

6 个解决方案

#1

用jquery实现非常简单

可google “jquery 拖动”

#2

我找到一个 http://dev.iceburg.net/jquery/jqDnR/ 但是还是不知道怎么用

#3

哦，知道了，搞定，可以拖了，不过不知道是不是能满足需求，下午试试

#4

  obj_Ofx = event.clientX;
 你的不兼容就是类似这个几个地方不兼容event在FF中读取不到的

#5

http://dev.iceburg.net/jquery/jqDnR/  的效果不太合适，我要的是原来的效果

4楼的朋友，这个代码要怎么改呢？谢谢

#6

找到一个，效果很好！

--------------------------------------------

共享一个简单的JS拖动层效果，支持ie，ff，opera，safari；

ie有专门的拖动方法：dragstart,drag,dragend分别是开始拖动，拖动，结束拖动。但是其他浏览器（dom类，例如ff）不支持这些拖动方法。所以只能用鼠标事件模拟拖动层效果。

实现原理：

我们知道用户使用拖动效果，需要完成一下事件

1.在某个区域按下鼠标左键，

2.按住鼠标左键不放，拖动鼠标；

3.拖到合适的位置后，放开鼠标左键。

这3步用JS的事件来描述的话就是：

用户在可拖动区域onmousedown，并在onmousedown的情况下触发onmousemove事件，当onmouseup的时候移除onmousemove事件。

看代码：

=============================================================================

<!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 id="f" style="position: absolute; width: 200px; height: 150px; background-color: #ccc; top: 150px; left: 200px; z-index: 101; border: solid 1px blue;">
        <div id="title" style="background-color: Blue; cursor: move; height: 20px; color: #fff;font-size: 13px; padding-top: 5px; padding-left: 10px;"> 拖动层 </div>
    </div>
<script type="text/javascript">
var posX;
var posY;       
fdiv = document.getElementById("f");           
document.getElementById("title").onmousedown=function(e)
{
    if(!e) e = window.event;  //如果是IE
    posX = e.clientX - parseInt(fdiv.style.left);
    posY = e.clientY - parseInt(fdiv.style.top);
    document.onmousemove = mousemove;           
}
document.onmouseup = function()
{
    document.onmousemove = null;
}
function mousemove(ev)
{
    if(ev==null) ev = window.event;//如果是IE
    fdiv.style.left = (ev.clientX - posX) + "px";
    fdiv.style.top = (ev.clientY - posY) + "px";
}
</script>

</body>
</html>