使用js实现鼠标可拖动图片更改位置，点击图片弹出对话框

Miss.PH

已于 2024-01-24 11:39:30 修改

阅读量828

点赞数 7

文章标签： javascript 前端

于 2024-01-24 09:47:05 首次发布

本文链接：https://blog.youkuaiyun.com/sinat_20078327/article/details/135813484

版权

本文详细描述了如何在HTML中使用JavaScript实现一个可拖动的图片，同时确保在拖拽过程中避免对话框弹出，只有在松开鼠标且图片位置未改变时才显示对话框。

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

之前为完成网页边侧放置一个可点击的图标，但图标有时会影响用户浏览网页，所以需要可以拖拽图片更改其位置。但是在实现过程中总是会在拖拽结束松开鼠标时总是会弹出对话框，最终经过多次更改终于完成了这个功能！

在html中放入一个图片：

<div>
    <img src="这里是您的图片地址" id="dragImg" alt="image">
</div>

js实现：

<script>
    // 获取图片元素
    var robot = document.getElementById("dragImg");

    // 设置图片元素为可拖拽
    robot.addEventListener("mousedown", dragStart, false);

    // 定义拖拽起始位置的偏移量
    var offsetX = 0;
    var offsetY = 0;

    // 标记拖拽是否发生
    var isDragging = false;

    // 处理拖拽开始事件
    function dragStart(event) {
      offsetX = event.clientX - robot.offsetLeft;
      offsetY = event.clientY - robot.offsetTop;
      window.addEventListener("mousemove", drag, false);
      window.addEventListener("mouseup", dragEnd, false);
      isDragging = false; // 重置标志变量
    }

    // 处理拖拽过程中的事件
    function drag(event) {
      robot.style.left = (event.clientX - offsetX) + "px";
      robot.style.top = (event.clientY - offsetY) + "px";
      isDragging = true; // 设置拖拽标志为true
    }

    // 处理拖拽结束事件
    function dragEnd() {
      window.removeEventListener("mousemove", drag, false);
      window.removeEventListener("mouseup", dragEnd, false);
    }

    // 处理点击机器人图标的事件
    robot.addEventListener("click", showDialog, false);

    // 显示对话框
    function showDialog() {
      if (!isDragging) {
        alert("对话框内容");
      }
    }

</script>

此外图片的样式为：

#dragImg {
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: #f0f0f0;
    border-radius: 50%;
    text-align: center;
    cursor: pointer;
}

这是我随意写的一个样式，主要是设置绝对定位！

如果isDragging未能达到效果的话，我们可以选择记录mousedown和mouseup时的鼠标位置，当位置未发生改变时再弹出对话框。