DIV 层拖动应用

DIV 层拖动应用
//外部导入JS源程序(之所以用外部导入的方式，是因为微软在WEB页上用activex控件的时候要求激活控件)
//外部导入文件的方式则不会有此问题

function InitMedioPlay()
{
     var d = document.getElementById("objPlay");
     if(!d) return;
     d.innerHTML = "";
    
     var str="";
         str+="<table style=/"width:510px;height:375px/" cellpadding=/"0/" cellspacing=/"0/"  class=/"tableleft/">";
         str+="<tr style=/"width: 510px;height:20px;background-color:#CCC7BA/">";
         str+="     <td style=/"width:485px;height:20px;text-align:center;/">";
         str+="             视频播放窗口";
         str+="     </td>";
         str+="     <td style=/"width:25px;height:20px;text-align:right;vertical-align:top;/">";
         str+="        <img src=/"../images/close.gif/" width=/"20px/" height=/"20px/" border=/"0/" οnclick=/"showoff()/" alt=/"/" /> ";
         str+="     </td>";
         str+="</tr>";        
         str+="<tr style=/"width: 510px;height:355px/">";
         str+="     <td colspan=/"2/" style=/"width:510px;height:375px;text-align:center;vertical-align:middle;border-top-style:inset;border-top-color:#CCC7BA;border-top-width:thin /">";
         str+="         <object classid=/"CLSID:10CB7DAE-4BA6-4309-825A-BBF43BD05BB8/" id=/"localPlay/"' width=/"100%/" height=/"100%/" > </object>";
         str+="     </td>";  
         str+="</tr>";    
         str+="</table> ";    
     
d.innerHTML =str;
}

function $get(id)
{
  return (typeof(id)=="object")?id:document.getElementById(id);
}

/*********************************以下为视频播放窗口处理部分********************************/    
    
    function OpenWindow()
    {
        InitMedioPlay();
    }
    function showoff()
    {  
        $get("objPlay").innerHTML = "";
    }
        
<!--

/***********************视频播放窗口拖动************************/
  function   beginDrag(elementToDrag,event)
  {
//计算元素原左上角与鼠标的距离
      //moveHandler要这值
      /*计算对象与鼠标之间的距离，x，y坐标*/
      var   delatX=event.clientX-parseInt(elementToDrag.style.left);
      var   delatY=event.clientY-parseInt(elementToDrag.style.top);

      //注册响应mousemove和mousedown事件后的mouseup事件的处理程序
      if(document.addEventListener)
      {     //2级DOM事件模型
          //注册捕捉事件处理程序
          document.addEventListener("mousemove",moveHandler,true); //添加事件，并设置事件的相应顺序 true为先执行 moveHandler()
document.addEventListener("mouseup",upHandler,true);
      }
      else if(document.attachEvent)
      {   //IE5+   的事件模型
  
          /*在IE事件模型中，我们不能捕捉事件，所以只有当事件起泡到这些处理程序时,
          它们才被触发.   假设不存在干涉元素,   处理了事件后它们就停止传播*/
      
          document.attachEvent("onmousemove",moveHandler);
          document.attachEvent("onmouseup",upHandler);
      }
      else
      {
          //IE4事件模型
          //IE4我们不能使用attachEvent方法,所以存储了以前赋予的处理
          //程序后,直接赋予新的事件处理程序,这样可以恢复旧的处理程序.
          //注意,这样依赖于事件起泡.
          var oldmovehandler=document.onmousemove;
          var olduphandler=document.onmouseup;
          document.οnmοusemοve=moveHandler;
          document.οnmοuseup=upHandler;
      }
      //我们处理了该事件,不要再让其他元素看见.
      if(event.stopPropagation)
        event.stopPropagation();   //2   级DOM
      else
        event.cancelBubble=true; //IE
  
      //下面禁止执行默认动作
if(event.preventDefault)
        event.preventDefault();     //2级DOM
      else
        event.returnValue=false; //IE
        
      /*这是元素被拖动时捕捉mousemove事件的处理程序.
      * 它负责移动元素
      */
      function moveHandler(e)
      {
          if(!e)e=window.event; //IE事件模型;
       //把元素移动到鼠标当前的位置,根据初始鼠标点击的偏移量进行调整
          elementToDrag.style.left=(e.clientX-delatX)+"px"; //e.clientX 鼠标位置
          elementToDrag.style.top=(e.clientY-delatY)+"px";
          //不要再让其他元素看到该事件.
          if(e.stopPropagation)e.stopPropagation();     //2级DOM
          else e.cancelBubble=true; //IE
      }
      /*     这是捕捉拖移结束最后发生的mouseup事件的处理程序.
        */
      function upHandler(e)
      {
          if(!e)   e=window.event; //IE事件模型.
          //注销捕捉事件程序.
          if(document.removeEventListener){//DOM事件模型
              document.removeEventListener("mouseup",upHandler,true);
              document.removeEventListener("mousemove",moveHandler,true);
         }
          else if(document.detachEvent){//IE5+事件模型
              document.detachEvent("onmouseup",upHandler);
              document.detachEvent("onmousemove",moveHandler);
          }
          else{//IE事件模型
              document.οnmοuseup=olduphandler;
              document.onousemove=oldmovehandler;
          }
 //不要再让事件进一步传播.
          if(e.stopPropagation)   e.stopPropagation();     //2级DOM
          else e.cancelBubble = true; //IE
     }
  }

在要实现DIV层拖动的WEB页内如下设计：
<html>
<head id="Head1" runat="server">
    <title></title>
    <script src="JScript.js" language="JScript"></script>   
</head>
<body >
    <div id="objPlay"   style="width:510px;height:375px;position:absolute; left:0px;top:0px;z-index:1;" οnmοusedοwn="beginDrag(this,event);" ></div>
</body>
</html>

注意：
    position:absolute;
    left:0px;top:0px;
    z-index:1
    这几个设置是必需的。