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" οnclick="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>