原生JS实现拖拽图片效果

2023年6月11日上午4:55 • JavaScript

以下是我详细讲解“原生JS实现拖拽图片效果”的完整攻略。

简介

在Web开发中，拖拽功能已经成为了很常见的一种交互方式。利用原生JS实现拖拽功能是我们必须掌握的技能之一。本攻略将会教你如何使用原生JS实现拖拽图片的效果，便于你在实际开发中适用。

实现步骤

1. HTML代码

首先，我们需要有一张图片，并在HTML中添加img标签。代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Drag Image</title>
</head>
<body>
  <img src="./image.jpg" id="dragImg" alt="drag image">
</body>
</html>

2. CSS代码

接下来，我们需要为这张图片添加一些CSS样式，让其在拖拽过程中更加美观。代码如下：

#dragImg {
  width: 300px;
  height: 200px;
  border: 2px solid black;
  cursor: move;
}

3. JS代码

我们来到最关键的一步。下面的JS代码将会实现拖拽效果。

首先，我们需要获取HTML中的图片元素，并为其添加mousedown、mousemove和mouseup事件监听器。代码如下：

// 获取图片元素
var img = document.getElementById("dragImg");

// 鼠标按下时触发事件
img.onmousedown = function(evt) {
  // 计算鼠标位置与图片位置的差值，使得图片位置不会突然跳动
  var diffX = evt.clientX - img.offsetLeft;
  var diffY = evt.clientY - img.offsetTop;

  // 鼠标移动时触发事件
  document.onmousemove = function(evt) {
    // 计算图片应该移动到的位置
    var posX = evt.clientX - diffX;
    var posY = evt.clientY - diffY;

    // 设置图片的位置
    img.style.left = posX + "px";
    img.style.top = posY + "px";
  };

  // 鼠标松开时触发事件
  document.onmouseup = function() {
    // 解除鼠标移动事件监听器
    document.onmousemove = null;
    document.onmouseup = null;
  };
};

完整的JS代码如下：

var img = document.getElementById("dragImg");

img.onmousedown = function(evt) {
  var diffX = evt.clientX - img.offsetLeft;
  var diffY = evt.clientY - img.offsetTop;

  document.onmousemove = function(evt) {
    var posX = evt.clientX - diffX;
    var posY = evt.clientY - diffY;

    img.style.left = posX + "px";
    img.style.top = posY + "px";
  };

  document.onmouseup = function() {
    document.onmousemove = null;
    document.onmouseup = null;
  };
};