用简单的函数,完成鼠标拖动多个图片

最新推荐文章于 2025-06-17 12:55:56 发布

原创最新推荐文章于 2025-06-17 12:55:56 发布 · 505 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#function #null

DHTML 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一种使用简单函数实现鼠标拖动图片的方法。通过设置事件监听器，当鼠标按下时捕获图片位置，移动时更新图片坐标，释放鼠标时结束拖动，实现了网页中图片的自由拖拽。

<img src=" http://www.lshdic.cn/bbs/image/fyw.jpg" onmousedown=one() onmousemove=two() onmouseup=end()><p>
<img src=" http://www.lshdic.cn/bbs/image/fyw.jpg" onmousedown=one() onmousemove=two() onmouseup=end()><p>
dddddd
<script>
//作者:风云舞, http://lshdic.cn
//用简单的函数，完成鼠标拖动多个图片
var oldx=0,oldy=0,oldobj=null
function one(){
oldobj=event.srcElement
oldx=event.x-oldobj.offsetLeft;oldy=event.y-oldobj.offsetTop;
oldobj.style.position="absolute"
oldobj.setCapture()
}
function two(){
if(oldobj==null)return false
oldobj.style.left=event.x-oldx
oldobj.style.top=event.y-oldy
}
function end(){
oldobj=null;document.releaseCapture();
}
</script>