Javascript 实现 div 的拖动

foreverpx

于 2013-10-15 16:25:59 发布

阅读量727

点赞数

分类专栏： Web前端文章标签： javascript 前端开发

本文链接：https://blog.youkuaiyun.com/ForeverCjl/article/details/12751567

版权

Web前端专栏收录该内容

115 篇文章

订阅专栏

本文介绍了一个简单的JavaScript实现，允许用户通过鼠标操作在网页上拖动一个指定的元素。该实现利用了HTML和JavaScript的基本功能，展示了如何响应鼠标按下、移动及释放事件来改变元素的位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>

<head>

<script type="text/javascript">

var x;

var y;

function $(id)

{  

        return document.getElementById(id)  

} 

function mousedown()

{

x=event.clientX-$("px").style.pixelLeft;

y=event.clientY-$("px").style.pixelTop;

$("px").style.border="2px solid red";

$("px").onmousemove = mousemove;

}

function mouseup()

{

$("px").onmousemove = "";

$("px").style.border="";

}

function mousemove()

{

$("px").style.pixelLeft=event.clientX-x;

$("px").style.pixelTop=event.clientY-y;

}

 

</script>

</head>

<body>

<div id="px" style="position:absolute; left:100px; height:100px; width:100px; background-color:#FF0;"

οnmοusedοwn="mousedown()" οnmοuseup="mouseup()" >

</div>

</body>

</html>