提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

Javascript简单实现可拖动的div

JavaScript 实现 简单 div 拖动
2023-06-13 09:15:06 时间
复制代码代码如下:

<html>
<head>
<scripttype="text/javascript">
varx;
vary;
function$(id)
{
returndocument.getElementById(id)
}
functionmousedown()
{
x=event.clientX-$("px").style.pixelLeft;
y=event.clientY-$("px").style.pixelTop;
$("px").style.border="2pxsolidred";
$("px").onmousemove=mousemove;
}
functionmouseup()
{
$("px").onmousemove="";
$("px").style.border="";
}
functionmousemove()
{
$("px").style.pixelLeft=event.clientX-x;
$("px").style.pixelTop=event.clientY-y;
}
</script>
</head>
<body>
<divid="px"style="position:absolute;left:100px;height:100px;width:100px;background-color:#FF0;"
onmousedown="mousedown()"onmouseup="mouseup()">
</div>
</body>
</html>

相关文章