javascript 实现WINDOWS 风格的可拖拽的DIV浮动窗口

来源：互联网发布：2016网络视频市场份额编辑：程序博客网时间：2024/05/22 04:56

注意点：

1、点击Title拖动浮动窗口的时候需要捕获鼠标焦点，否则拖啊拖的就把窗口给丢了。

我参考了一些代码，网上主要使用两种：setCapture(IE)，CaptureEvent(FF)。

其中setCapture和releaseCapture是IE实现的Element方法，W3C标准和FireFox 函数都没有该函数

我使用了CaptureEvent后，FireFox 告诉我这个方法已经被废弃。让我使用addEventListener

这可能是我使用的是最新版本的FireFox的关系。

后来查了一下W3C标准，发现addEventListener是W3C的ELEMENT标准方法。

但测试一下发现好像IE还不支持addEventListener方法。

所以上面就有了if (title.setCapture) {} else if (document.addEventListener)的语句

addEventListener实现鼠标焦点的消息的捕捉必须得document.addEventListener

Element或者document.body调用addEvenListener都没有效果

2、在创建title和close的时候，使用了innerHTML和getElementById

这是在是没有办法的办法，本来我想也可以使用createElement("table")

createElement("tr") createElement("td")，再设置他们的属性并把他们appendChild

但最终发现这种方法在FireFox里用的好好的，在IE却不行。

最后认定IE6对table Element 的createElement 方法和appendChild的方法实现存在BUG

暴汗，IE的BUG真多。

以下是测试源代码，在IE6.0和FireFox3.0中通过：

<!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>test sWin</title>

    <script type="text/javascript">
    function inittitle(odiv,title)
    {
     title.onmousedown=function(e) {
         if (e==null) e=window.event;
      var x=e.layerX?e.layerX:e.offsetX;
      var y=e.layerY?e.layerY:e.offsetY;

      if(title.setCapture) { // for ie brower
          title.setCapture();
          document.onmousemove=function(e) {
           if (e==null) e=window.event;
           if (!e.pageX) e.pageX=e.clientX;
           if (!e.pageY) e.pageY=e.clientY;
           var tx=e.pageX-x;
           var ty=e.pageY-y;

           odiv.style.left=tx + "px";
           odiv.style.top=ty + "px";
          };
          document.onmouseup=function(){
           title.releaseCapture();
           document.onmousemove=null;
           document.onmouseup=null;
          };
      } else if(document.addEventListener)
      {
          function mousemove(e) {
           if (e==null) e=window.event;
           if (!e.pageX) e.pageX=e.clientX;
           if (!e.pageY) e.pageY=e.clientY;
           var tx=e.pageX-x;
           var ty=e.pageY-y;

           odiv.style.left=tx + "px";
           odiv.style.top=ty + "px";
          };
          function mouseup(e) {
              document.removeEventListener("mousemove",mousemove, false);
              document.removeEventListener("mouseup",mouseup,false);
          };

       document.addEventListener("mousemove",mousemove, false);
          document.addEventListener("mouseup", mouseup, false);
      }
  };
    }

    function initclose(odiv,close)
    {
        close.onmouseout=function(e)
        {
            var css = "text-decoration:none; font-size:13px; "
                    + "font-weight:bold; color:#ffffff";
            close.style.cssText = css;
        };
        close.onmouseover=function(e)
        {
            var css = "text-decoration:none; font-size:13px; "
                    + "font-weight:bold; background-color:#FFD0F0";
            close.style.cssText = css;
        };
        close.onmousedown=function(e)
        {
            ;
        }
        close.onclick=function(e)
        {
            odiv.style.display="none";
        }
    }

    function closeswin(){}

    function donothing(){}

    function sWin()
    {
        var csst= "position:absolute; "
                + "border:2px solid #0040A0; "
                + "left:10px; top:10px; "
                + "width:522px; height:380px; ";
        var css1= "height:18px; "
                + "background-color:#0040A0; ";
        var css2 = "height:362px; background-color:#FFFFFF; ";

        var d1 = document.createElement("div");
        var d2 = document.createElement("div");
        var odiv = document.createElement("div");

        odiv.appendChild(d1);
        odiv.appendChild(d2);
        document.body.appendChild(odiv);

        odiv.style.cssText = csst;
        d1.style.cssText = css1;
        d2.style.cssText = css2;

        d1.innerHTML="<table border=/"0/" width=/"100%/" cellpadding=/"0/" cellspacing=/"0/">"
                    +"<tr><td style=/"color:#ffffff; font-size:13px; font-weight:bold;"
                    +"padding-left:2px; width:500px; cursor:default;/" "
                    +"id=/"sWin_title/" valign=/"top/">选择关联商品...</td>"
                    +"<td align=/"center/" onmousedown=/"javascript:donothing();/">"
                    +"<a href=/"javascript:closeswin();/" id=/"sWin_close/" "
                    +"style=/"text-decoration:none; font-size:13px; "
                    +"font-weight:bold; color:#ffffff/">×</td></tr></table>";

        var title = document.getElementById("sWin_title");
        var close = document.getElementById("sWin_close");

        inittitle(odiv,title);
        initclose(odiv,close);

        this.client = d2;
    }

    var win1;
    window.onload = function(){ win1=sWin();}
    </script>
</head>
<body>
    <a style="text-decoration:none"></a>
</body>
</html>