DIV拖动问题

我想做个DIV可以拖动，但是做了很久，都没出效果，想死了，请帮忙解决下：谢谢了！！
js:var oObj;
var oEvent;
var dragData;
var backData;
function $(_id){return document.getElementById(_id);}
function dialog(){
        this.event=function(){
                oObj =document.getElementById("smove");
                oObj.style.display='block';
        }        this.moveStart = function (event){
                oEvent = window.event ? window.event : event;
                //获取拖动对象
                //赋予对象拖动操作
                oObj.onmousemove = mousemove;
                oObj.onmouseup = mouseup;
                //捕获鼠标移动
                oObj.setCapture ? oObj.setCapture() : function(){};
                //获取窗口事件
                //保留鼠标位置
                 dragData = {x : oEvent.clientX, y : oEvent.clientY};

                //保留对象位置
                 backData = {x : parseInt(oObj.style.top), y : parseInt(oObj.style.left)};

                //鼠标移动
                function mousemove(event){
                        //获取窗口事件
                        alert("dsf")
                        oEvent = window.event ? window.event : event;
                        //计算提示框位置
                        var iLeft = oEvent.clientX - dragData["x"] + parseInt(oObj.style.left);
                        var iTop = oEvent.clientY - dragData["y"] + parseInt(oObj.style.top);

                        //设置提示框位置
                        oObj.style.left = iLeft + "px";
                        oObj.style.top = iTop + "px";
                        alert(oObj.style.left);

                        //刷新保留鼠标位置
                        dragData = {x: oEvent.clientX, y: oEvent.clientY};
                }

                //鼠标键抬起
                function mouseup(event){
                        //获取窗口事件
                        oEvent = window.event ? window.event : event;

                        //清除对象拖动操作
                        oObj.onmousemove = null;
                        oObj.onmouseup = null;

                        //如果鼠标是否超出浏览器范围
                        if(oEvent.clientX < 1 || oEvent.clientY < 1 || oEvent.clientX > document.body.clientWidth || oEvent.clientY > document.body.clientHeight){
                                //还原提示框位置
                                oObj.style.left = backData.y + "px";
                                oObj.style.top = backData.x + "px";

                        }

                        //关闭捕获鼠标移动
                        oObj.releaseCapture ? oObj.releaseCapture() : function(){};
                }
        }
        }
jsp:<html>
    <head><script type="text/javascript" src="../js/ShowFloatDiv.js"></script></body>
    <body>
          <div align="center" style="display:none" id="smove">
                                <table width="640" border="0">
                                        <tr height="1">
                                                <td width="634">

                                                </td>
                                        </tr>
                                        <tr>
                                                <td height="23">
                                                        <table width="636" border="0" bgcolor="#000" style="cursor: move"
                                                                onselectstart="return false" onmousedown="new dialog().moveStart(event);">
                                                                <tr>
                                                                        <td width="61">

                                                                        </td>
                                                                        <td width="531">

                                                                        </td>
                                                                        <td width="20" align="right" valign="middle">
                                                                                <input type="image" src="../img/CloseOut.gif" style="cursor: hand"
                                                                                        onmouseover="this.src='../img/CloseOut.gif'"
                                                                                        onmouseout="this.src='../img/CloseOver.gif'"></input>
                                                                        </td>
                                                                </tr>
                                                        </table>
                                                </td>
                                        </tr>
                                        <tr>
                                                <td>

                                                </td>
                                        </tr>
                                </table>
                        </div>
   </body>
</html>

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<html>
<head>
<style type="text/css">
div
{
position:absolute;
background-color:#aa3333;
border-style:solid;
border-width:1px;
border-color:#443366;
}
</style> <script type="text/javascript">
function $(id)
{
return document.getElementById(id);
};
function initialize()
{
$("div1").style.width="100px";
$("div1").style.height="100px";
$("div1").style.left="100px";
$("div1").style.top="100px";
$("div1").style.backgroundColor="#aaddcc";
$("div2").style.width="100px";
$("div2").style.height="100px";
$("div2").style.left="300px";
$("div2").style.top="300px";
}; function drag(element,e)
{
e=e||event;
setFocus(element.id);
if(document.addEventListener)
{
document.addEventListener("mousemove",startDrag,true);
document.addEventListener("mouseup",stopDrag,true);
}
else
{
document.onmousemove=startDrag;
document.onmouseup=stopDrag;
}
var deltaX=e.clientX-parseInt(element.style.left);
var deltaY=e.clientY-parseInt(element.style.top);
function startDrag(e)
{
e=e||event;
element.style.left=e.clientX-deltaX+"px";
element.style.top=e.clientY-deltaY+"px";
};

function stopDrag()
{
if(document.removeEventListener)
{
document.removeEventListener("mousemove",startDrag,true);
document.removeEventListener("mouseup",stopDrag,true);
}
else
{
document.onmousemove="";
document.onmouseup="";
}

var oDiv=document.getElementsByTagName("div");
for(var i=0;i<oDiv.length;i++)
{
if(element!=oDiv[i]
&& parseInt(element.style.left)+parseInt(element.style.width)>parseInt(oDiv[i].style.left)
&& parseInt(element.style.left)<parseInt(oDiv[i].style.left)+parseInt(oDiv[i].style.width)
&& parseInt(element.style.top)+parseInt(element.style.height)>parseInt(oDiv[i].style.top)
&& parseInt(element.style.top)<parseInt(oDiv[i].style.top)+parseInt(oDiv[i].style.height))
{
splitElements(element,oDiv[i]);
break;
}
}
};
};

function setFocus(elementId)
{
var oDiv=document.getElementsByTagName("div");
for(var i=0;i<oDiv.length;i++)
{
if(oDiv[i].id==elementId)
{
oDiv[i].style.zIndex=20;
}
else
{
oDiv[i].style.zIndex=10;
}
}
};

function splitElements(element1,element2)
{
e1Left=parseInt(element1.style.left);
e2Left=parseInt(element2.style.left);
e1Top=parseInt(element1.style.top);
e2Top=parseInt(element2.style.top);
var direction;
var mode;
var intervalId;

function doSplit()
{
if(mode=="horizontal")
{
if(Math.abs(parseInt(element1.style.left)-parseInt(element2.style.left))<=parseInt(element1.style.width))
{
element1.style.left=parseInt(element1.style.left)+direction*5;
element2.style.left=parseInt(element2.style.left)-direction*5;
}
else
{
window.clearInterval(intervalId);
}
}
if(mode=="vertical")
{
if(Math.abs(parseInt(element1.style.top)-parseInt(element2.style.top))<=parseInt(element1.style.height))
{
element1.style.top=parseInt(element1.style.top)+direction*5;
element2.style.top=parseInt(element2.style.top)-direction*5;
}
else
{
window.clearInterval(intervalId);
}
}
};

if(Math.abs(e1Left-e2Left)<=Math.abs(e1Top-e2Top))
{
direction=Math.abs(e1Left-e2Left)/(e1Left-e2Left);
direction=e1Left-e2Left==0?1:direction;
mode="vertical";
}
else
{
direction=Math.abs(e1Top-e2Top)/(e1Top-e2Top);
direction=e1Top-e2Top==0?1:direction;
mode="horizontal";
}

intervalId=window.setInterval(doSplit,20); }
</script>
</head>
<body onload="initialize()">
<div id="div1" onmousedown="drag(this,event)"></div>
<div id="div2" onmousedown="drag(this,event)"></div>
</body>
</html>
今天上午回答其它问题时写的。(—.—)
此回复为自动发出,仅用于显示而已，并无任何其他特殊作用
楼主【lc2tp】截止到2008-06-26 17:04:58的历史汇总数据(不包括此帖)：
发帖数:18                 发帖分:380
结贴数:12                 结贴分:260
未结数:6                  未结分:120
结贴率:66.67 %            结分率:68.42 %
楼主加油
我把自己的DIV测试后，报错，说，参数无效，跟踪到这句element.style.left=e.clientX-deltaX+"px"; 不能执行
我测试过的，确定可以用你新建一个HTML文件，把代码全部放进去，然后运行HTML文件
我试了，你的代码是可以执行，但是我要我的DIV，我把我的DIV onmousdown(this,event); 就报无效参数啊~~
你把你的div的id改为"div2"就行了
还是同样的错误！！alert(e.clientX-deltaX+"px"); 输出的是：NaNpx!!
<html>
    <head>
        <style type="text/css">
            div
            {
                position:absolute;
                background-color:#aa3333;
                border-style:solid;
                border-width:1px;
                border-color:#443366;
            }
        </style>        <script type="text/javascript">
            function $(id)
            {
                return document.getElementById(id);
            };
            function initialize()
            {
                $("div1").style.width="100px";
                $("div1").style.height="100px";
                $("div1").style.left="100px";
                $("div1").style.top="100px";
                $("div1").style.backgroundColor="#aaddcc";
                                $("div2").style.width="100px";
                $("div2").style.height="100px";
                $("div2").style.left="300px";
                $("div2").style.top="300px";
            };            function drag(element,e)
            {
                e=e||event;
                setFocus(element.id);
                if(document.addEventListener)
                {
                    document.addEventListener("mousemove",startDrag,true);
                    document.addEventListener("mouseup",stopDrag,true);
                }
                else
                {
                    document.onmousemove=startDrag;
                    document.onmouseup=stopDrag;
                }
                var deltaX=e.clientX-parseInt(element.style.left);
                var deltaY=e.clientY-parseInt(element.style.top);
                function startDrag(e)
                {
                    e=e||event;
                    element.style.left=e.clientX-deltaX+"px";
                    element.style.top=e.clientY-deltaY+"px";
                };

                function stopDrag()
                {
                    if(document.removeEventListener)
                    {
                        document.removeEventListener("mousemove",startDrag,true);
                        document.removeEventListener("mouseup",stopDrag,true);
                    }
                    else
                    {
                        document.onmousemove="";
                        document.onmouseup="";
                    }

                    var oDiv=document.getElementsByTagName("div");
                    for(var i=0;i<oDiv.length;i++)
                    {
                        if(element!=oDiv[i]
                        && parseInt(element.style.left)+parseInt(element.style.width)>parseInt(oDiv[i].style.left)
                        && parseInt(element.style.left)<parseInt(oDiv[i].style.left)+parseInt(oDiv[i].style.width)
                        && parseInt(element.style.top)+parseInt(element.style.height)>parseInt(oDiv[i].style.top)
                        && parseInt(element.style.top)<parseInt(oDiv[i].style.top)+parseInt(oDiv[i].style.height))
                        {
                            splitElements(element,oDiv[i]);
                            break;
                        }
                    }
                };
            };

            function setFocus(elementId)
            {
                var oDiv=document.getElementsByTagName("div");
                for(var i=0;i<oDiv.length;i++)
                {
                    if(oDiv[i].id==elementId)
                    {
                        oDiv[i].style.zIndex=20;
                    }
                    else
                    {
                        oDiv[i].style.zIndex=10;
                    }
                }
            };

            function splitElements(element1,element2)
            {
                e1Left=parseInt(element1.style.left);
                e2Left=parseInt(element2.style.left);
                e1Top=parseInt(element1.style.top);
                e2Top=parseInt(element2.style.top);
                var direction;
                var mode;
                var intervalId;

                function doSplit()
                {
                    if(mode=="horizontal")
                    {
                        if(Math.abs(parseInt(element1.style.left)-parseInt(element2.style.left))<=parseInt(element1.style.width))
                        {
                            element1.style.left=parseInt(element1.style.left)+direction*5;
                            element2.style.left=parseInt(element2.style.left)-direction*5;
                        }
                        else
                        {
                            window.clearInterval(intervalId);
                        }
                    }
                    if(mode=="vertical")
                    {
                        if(Math.abs(parseInt(element1.style.top)-parseInt(element2.style.top))<=parseInt(element1.style.height))
                        {
                            element1.style.top=parseInt(element1.style.top)+direction*5;
                            element2.style.top=parseInt(element2.style.top)-direction*5;
                        }
                        else
                        {
                            window.clearInterval(intervalId);
                        }
                    }
                };

                if(Math.abs(e1Left-e2Left)<=Math.abs(e1Top-e2Top))
                {
                    direction=Math.abs(e1Left-e2Left)/(e1Left-e2Left);
                    direction=e1Left-e2Left==0?1:direction;
                    mode="vertical";
                }
                else
                {
                    direction=Math.abs(e1Top-e2Top)/(e1Top-e2Top);
                    direction=e1Top-e2Top==0?1:direction;
                    mode="horizontal";
                }

                intervalId=window.setInterval(doSplit,20);            }
        </script>
    </head>
<body onload="initialize()">
        <div id="div1" onmousedown="drag(this,event)"></div>
        <div onmousedown="drag(this,event)" align="center" style="display:inline" id="div2">
                                <table width="640" border="0">
                                        <tr height="1">
                                                <td width="634">

                                                </td>
                                        </tr>
                                        <tr>
                                                <td height="23">
                                                        <table width="636" border="0" bgcolor="#000" style="cursor: move">
                                                                
                                                                <tr>
                                                                        <td width="61">

                                                                        </td>
                                                                        <td width="531">

                                                                        </td>
                                                                        <td width="20" align="right" valign="middle">
                                                                                <input type="image" src="../img/CloseOut.gif" style="cursor: hand"
                                                                                        onmouseover="this.src='../img/CloseOut.gif'"
                                                                                        onmouseout="this.src='../img/CloseOver.gif'"> </input>
                                                                        </td>
                                                                </tr>
                                                        </table>
                                                </td>
                                        </tr>
                                        <tr>
                                                <td>

                                                </td>
                                        </tr>
                                </table>
                        </div>
    </body>
</html>加起来运行
这会没报错，但是我的DIV根本就动不了！！怎么弄呀，老大
我做的Div拖动放大镜，你自己看看代码，参考参考
http://blog.xdnice.com/user1/23/archives/2008/78569.shtml