DIV层的拖动

drag.js


var move=false;
var innerWidth;
function StartDrag(obj)
{
if(event.button==1&&event.srcElement.tagName.toUpperCase()=="DIV")
{
obj.setCapture();
obj.style.background="#999";
move=true;
innerWidth = event.clientX - obj.parentNode.offsetLeft;
innerHeight = event.clientY - obj.parentNode.offsetTop;
}
}

function Drag(obj)
{
if(move)
{
var oldwin=obj.parentNode;

oldwin.style.left=event.clientX-innerWidth;
oldwin.style.top=event.clientY-innerHeight;
}

}

function StopDrag(obj)
{
obj.style.background="#000";
obj.releaseCapture();
move=false;
}



实例：导入上面的js  主要看第二个div的方法：<div style="width:500px;" onMousedown="StartDrag(this)" onMouseup="StopDrag(this)" onMousemove="Drag(this)">




实例参考代码

<div id="browseMen" style="position:absolute; z-index:3; left:10%; top:70px; width:90%; display:none;">
<div style="width:500px;" onMousedown="StartDrag(this)" onMouseup="StopDrag(this)" onMousemove="Drag(this)">
<div>
    <div class="div-mode" style="width:12px;"><img src="../images/index/pop-1.gif" width="12" height="30"></div>
      <div  class="div-mode title" >
            <div class="div-mode baise"  style="padding-top:4px;" >查看过人员列表</div>
        </div>
        <div class="div-mode" style="width:24px;"><img src="../images/index/pop-2.gif" width="24" height="30"  style="cursor:hand"  onclick="hiddenBrowseMen();"></div>
  </div>
 
 
<table width="500" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
    <td bgcolor="#666666" id="putBrowse">
  
              

                </td>
            </tr>            
    
   
</table>


</div>
</div>