尽可能短的写一个JS拖动

原创于 2011-11-01 19:06:12 发布 · 133 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #js #ViewUI

本文介绍了一种使用纯JavaScript实现元素拖拽效果的方法。通过简单的代码，实现了鼠标按下时捕获元素位置，并跟随鼠标移动实时更新元素位置的功能。适用于快速原型开发或小型项目。

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

<title>尽可能短的写一个JS拖动</title>
<body>
<div id="demo" style="width:100px; height:100px; position:absolute; background-color:silver;"></div>
<script>
function dragable(id){var d=document,o=d.getElementById(id),s=o.style,x,y,p='onmousemove';o.onmousedown=function(e){e=e||event;x=e.clientX-o.offsetLeft;y=e.clientY-o.offsetTop;d[p]=function(e){e=e||event;s.left=e.clientX-x+'px';s.top=e.clientY-y+'px'};d.onmouseup=function(){d[p]=null}}}
dragable("demo");
</script>