js控制鼠标拖动的效果疑问？

下面是我用js结合css要实现鼠标拖动效果，但是没反映。请大家帮我看看。
实现给分。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>提示信息框</title>
    <style type="text/css">
 a{ color:#000; font-size:12px;text-decoration:none}
 a:hover{ color:#900; text-decoration:underline}
 body{background:;filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#003366); overflow:hidden}
 #massage_box{ position:absolute;left:expression((body.clientWidth-350)/2); top:expression((body.clientHeight-200)/2); width:350px; height:200px;:absolute; filter:dropshadow(color=#666666,offx=3,offy=3,positive=2); z-index:2; visibility:hidden}
 #mask{ position:absolute; top:0; left:0; width:expression(body.clientWidth); height:expression(body.clientHeight); background:#666; filter:ALPHA(opacity=60); z-index:1; visibility:hidden}
 .massage{border:#036 solid; border-width:1 1 3 1; width:95%; height:95%; background:#fff; color:#036; font-size:12px; line-height:150%}
 .header{background:#036; height:10%; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; padding:3 5 0 5; color:#fff}
 </style>
 <script language="javascript">
 var x,y,z,down=false,obj;
 function init(){
  obj=event.srcElement; //获取焦点对象
  obj.setCapture(); //设置鼠标捕捉
  z=obj.style.zIndex; //取得原轴位置
  x=event.offsetX; //获取鼠标指针相对于触发事件的对象的x位置
  y=event.offsetY;  //获取鼠标指针相对于触发事件的对象的y位置
  down=true;
  }
  function moveIt(){
  if(down&&event.srcElement==obj){
  with(obj.style){
  posLeft=document.body.scrollLeft+event.x-x;
  posTop=document.body.scrollTop+event.y-y;
  }
  }
  }
  function stopDrag(){
  down=false;
  obj.style.zIndex=z;
  obj.releaseEvents;
  }
  </script>
</head>
<body>
    <div id="massage_box" onmousedown="init()" onmousemove="moveIt()" onmouseup="stopDrag()">
        <div class="massage">
            <div class="header">
                <div style="display: inline; width: 150px; position: absolute">
                    本站提示信息</div>
                <span onclick="massage_box.style.visibility='hidden'; mask.style.visibility='hidden'"
                    style="float: right; display: inline; cursor: hand">×</span></div>
            <ul style="margin-right: 25">
                <li>本人申明此博客所有文章（包括文章插图）均为原创，如需引用或转载请注明出处。 </li>
                <li>欢迎大家对博文中观点留言评述，谢绝无聊人士无素质无观点的灌水漫骂。</li><li>本站已设背景音乐，听音乐盒中收集的音乐时请先到页面底部关闭背景音乐。</li></ul>
        </div>
    </div>
    <div id="mask">
    </div>
    <span onclick="mask.style.visibility='visible';massage_box.style.visibility='visible'"
        style="cursor: hand"><a href="#">显示提示信息</a></span>
</body>
</html>

解决方案 »

  1.   

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>提示信息框</title>
    <style type="text/css">
    a{ color:#000; font-size:12px;text-decoration:none}
    a:hover{ color:#900; text-decoration:underline}
    body{background:;filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#003366); overflow:hidden}
    #massage_box{ position:absolute;left:expression((body.clientWidth-350)/2); top:expression((body.clientHeight-200)/2); width:350px; height:200px;:absolute; filter:dropshadow(color=#666666,offx=3,offy=3,positive=2); z-index:2; visibility:hidden}
    #mask{ position:absolute; top:0; left:0; width:expression(body.clientWidth); height:expression(body.clientHeight); background:#666; filter:ALPHA(opacity=60); z-index:1; visibility:hidden}
    .massage{border:#036 solid; border-width:1 1 3 1; width:95%; height:95%; background:#fff; color:#036; font-size:12px; line-height:150%}
    .header{background:#036; height:10%; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; padding:3 5 0 5; color:#fff}
    </style>
    <script language="javascript">
    function beginDrag(elementToDrag, event) {
    var deltaX = event.clientX - parseInt(elementToDrag.style.left);
    var deltaY = event.clientY - parseInt(elementToDrag.style.top);

    if (document.addEventListener) { //2 级 DOM事件模型
    document.addEventListener("mousemove", moveHandler, true);
    document.addEventListener("mouseup", upHandler, true);
    }
    else if (document.attachEvent) { //IE5+事件模型
    document.attachEvent("onmousemove", moveHandler);
    document.attachEvent("onmouseup", upHandler);
    }
    else { //IE4事件模型
    var oldmovehandler = document.onmousemove;
    var olduphandler = document.onmouseup;
    document.onmousemove = moveHandler;
    document.onmouseup = upHandler;
    }

    //禁止起泡
    if (event.stopPropagation) //DOM2
    event.stopPropagation();
    else event.cancelBubble = true; //IE

    if (event.preventDefault)
    event.preventDefault();
    else event.cancelBubble = true;

    function moveHandler(e) {
    if (!e)
    e = window.event;

    elementToDrag.style.left = (e.clientX - deltaX) + "px";
    elementToDrag.style.top = (e.clientY - deltaY) + "px"; if (e.stopPropagation)
    e.stopPropagation();
    else e.cancelBubble = true;
    }

    function upHandler(e) {
    if (!e)
    e = window.event;

    elementToDrag.style.cursor = "default";

    if (document.removeEventListener) { //DOM2
    document.removeEventListener('mouseup', upHandler, true);
    document.removeEventListener('mousemove', moveHandler, true);
    }
    else if (document.detachEvent) { //IE5+
    document.detachEvent("onmousemove", moveHandler);
    document.detachEvent("onmouseup", upHandler);
    }
    else { //IE4
    document.onmouseup = olduphandler;
    document.onmousemove = oldmovehandler;
    }

    if (e.stopPropagation)
    e.stopPropagation();
    else e.cancelBubble = true;
    }
    }
    </script>
    </head>
    <body>
    <div id="massage_box" onmousedown="beginDrag(this, event);" >
    <div class="massage">
    <div class="header">
    <div style="display: inline; width: 150px; position: absolute">
    本站提示信息</div>
    <span onclick="massage_box.style.visibility='hidden'; mask.style.visibility='hidden'"
    style="float: right; display: inline; cursor: hand">×</span></div>
    <ul style="margin-right: 25">
    <li>本人申明此博客所有文章（包括文章插图）均为原创，如需引用或转载请注明出处。 </li>
    <li>欢迎大家对博文中观点留言评述，谢绝无聊人士无素质无观点的灌水漫骂。</li><li>本站已设背景音乐，听音乐盒中收集的音乐时请先到页面底部关闭背景音乐。</li></ul>
    </div>
    </div>
    <div id="mask">
    </div>
    <span onclick="mask.style.visibility='visible';massage_box.style.visibility='visible'"
    style="cursor: hand"><a href="#">显示提示信息</a></span>
    </body>
    </html>
      

  2.   

    点击出来的div层,可以对它进行鼠标拖动.
    各位js在帮忙研究研究.
    谢谢willko的回答,好想不起作用啊.
      

  3.   

    是firefox下不行,ie下可以,感谢willko的回答.
      

  4.   

    var deltaX = event.clientX - parseInt(elementToDrag.style.left);
    var deltaY = event.clientY - parseInt(elementToDrag.style.top);==>>var deltaX = event.clientX - parseInt(elementToDrag.offsetLeft);
    var deltaY = event.clientY - parseInt(elementToDrag.offsetTop);其实我只是给个借鉴你你还是要修改成自己希望的效果。
      

  5.   

    哦，谢谢willko(珂) ，怎么给分你啊！
    我第一次给分在哪给你了。