当前位置:首页 > Js实例:Javascript拖动DIV层

Js实例:Javascript拖动DIV层

点击次数:1329  更新日期:2011-01-05
\n


\n

Javascript拖动DIV层代码如下:


\n

<html>
<body>
<style>
body{font-family:Verdana;font-size:11px;color:#333;}
#win1{[position:absolute;left:100;top:100;width:200px;height:150px;border:1px solid #000;}
.title{width:100%;background:#000;height:18px;color:#fff;cursor: move;}
</style>

<script>
var move=false;
function StartDrag(obj)
{
if(event.button==1&&event.srcElement.tagName.toUpperCase()==”DIV”)
{
obj.setCapture();
obj.style.background=”#999″;
move=true;
}
}


\n

function Drag(obj)
{
if(move)
{
var oldwin=obj.parentNode;
oldwin.style.left=event.clientX-100;
oldwin.style.top=event.clientY-10;
}

}


\n

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


\n

</script>


\n

<div id=”win1″>
<div class=”title” onMousedown=”StartDrag(this)” onMouseup=”StopDrag(this)” onMousemove=”Drag(this)” >窗口1</div>
设计家园<br>
www.dwww.cn .
</div>


\n

</body>
</html>

\n