用JavaScript移动对象

最新推荐文章于 2022-07-05 13:58:33 发布

最新推荐文章于 2022-07-05 13:58:33 发布 · 245 阅读

文章标签：

#javascript #前端 #ViewUI

本文介绍了一种使用JavaScript实现网页中图片拖拽效果的方法。通过监听鼠标事件并利用offsetLeft和offsetTop属性，可以轻松地让图片跟随鼠标移动，提供交互体验。

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

　drag me-><script type="text/javascript"> var xOffset,yOffset; function dragStart() { var obj=event.srcElement; obj.style.position="absolute"; obj.setCapture(); xOffset=event.x-obj.offsetLeft; yOffset=event.y-obj.offsetTop; } function doDrag() { event.srcElement.style.left=event.x-xOffset; event.srcElement.style.top =event.y-yOffset; } function dragEnd() { event.srcElement.style.cursor="default"; event.srcElement.releaseCapture(); } </script> <-drag me

源代码：

<scripttype="text/javascript">...

varxOffset,yOffset;

functiondragStart()

...{

varobj=event.srcElement;

obj.style.position="absolute";

obj.setCapture();

xOffset=event.x-obj.offsetLeft;

yOffset=event.y-obj.offsetTop;

}

functiondoDrag()

...{

event.srcElement.style.left=event.x-xOffset;

event.srcElement.style.top=event.y-yOffset;

}

functiondragEnd()

...{

event.srcElement.style.cursor="default";

event.srcElement.releaseCapture();

}

</script>

<imgsrc="https://i-blog.csdnimg.cn/blog_migrate/aae4c8aa1fd98cb03c90f5b4062100ab.png"onmousedown="this.style.cursor='move'"onmouseup="this.style.cursor='default'"ondragstart="dragStart()"ondrag="doDrag()"ondragend="dragEnd()"/>