拖拽效果

最新推荐文章于 2024-09-22 10:46:41 发布

dreambird1983

最新推荐文章于 2024-09-22 10:46:41 发布

阅读量492

点赞数

分类专栏： javascript 文章标签： function div 通讯 class html

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<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:hand;}
</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;
}
}

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

}

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

</script>

<div id="win1">
<div class="title" onMousedown="StartDrag(this)" onMouseup="StopDrag(this)" onMousemove="Drag(this)" >窗口1</div>
This is a moveable window.<br>
Moreinfo in www.achome.cn .
</div>

</body>
</HTML>

event.button：事件发生时表示鼠标的动作如果为1则是鼠标左键 2为鼠标右键

parentNode：父节点

event.ClientX：事件发生时的鼠标x值

event.ClientY：事件发生时的鼠标Y值

setCapture()方法：建立对象和鼠标之间的通讯也就是说鼠标作用在此对象上时才跟踪鼠标

releaseCapture()方法：切断对象和鼠标之间的通讯