JavaScript图片拖动效果（ondragstart和ondrag)

最新推荐文章于 2025-05-28 15:29:07 发布

最新推荐文章于 2025-05-28 15:29:07 发布 · 432 阅读

文章标签：

#javascript #ViewUI

本文介绍了一种利用HTML和JavaScript实现的图片拖拽功能，通过编写简单的CSS样式和JavaScript代码，使得用户可以轻松地在网页上拖动图片进行位置调整，提升用户体验。

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

<html>
<head>
<style type='text/css'>
.wen p{
text-align:left;
margin:15px 0 0 5px;
}
</style>
<script type='text/javascript'>
var xx=0,yy=0;
function movea(v){
xx=event.x-v.offsetLeft;
yy=event.y-v.offsetTop;
}
function moveb(v){
v.style.left=event.x-xx;
v.style.top=event.y-yy;
}
</script>
</head>
<body>
<img id='img' src='01.jpg' style='position:absolute'
ondragstart='movea(this);' ondrag='moveb(this);'>
</body>
</html>