HTML 获取拖动时的鼠标坐标（JS + HTML5）

在本文中，我们将介绍如何使用JS和HTML5获取拖动时鼠标的坐标位置。当我们在HTML页面上进行拖动操作时，经常需要知道鼠标的位置，以便进行相应的处理。下面将详细介绍如何实现这一功能。

阅读更多：HTML 教程

使用事件监听器获取鼠标位置信息

HTML5引入了一系列的事件监听器，其中包括拖动相关的事件。而通过监听这些事件，我们可以获得鼠标坐标的位置信息。以下是一些常用的拖动相关事件：

dragstart：拖动开始时触发的事件。
dragend：拖动结束时触发的事件。
drag：拖动过程中不断触发的事件。

我们可以通过在HTML元素上添加事件监听器来捕获这些事件，并获取鼠标的位置信息。以下是示例代码：

<!DOCTYPE html>
<html>
  <head>
    <title>获取拖动时的鼠标坐标</title>
    <style>
      #dragElement {
        width: 100px;
        height: 100px;
        background-color: red;
        position: absolute;
        left: 0;
        top: 0;
      }
    </style>
  </head>
  <body>
    <div id="dragElement"></div>

    <script>
      var dragElement = document.getElementById("dragElement");

      dragElement.addEventListener("drag", function (event) {
        var mouseX = event.clientX;
        var mouseY = event.clientY;

        console.log("鼠标位置：X-" + mouseX + "，Y-" + mouseY);
      });
    </script>
  </body>
</html>

在上面的示例代码中，我们创建了一个红色的方块，并给它添加了拖动事件监听器。当鼠标拖动方块时，会在控制台输出鼠标的X坐标和Y坐标。

使用clientX和clientY属性获取鼠标位置

在上面的示例中，我们使用了event对象的clientX和clientY属性来获取鼠标的位置。其中，clientX表示鼠标在窗口中的水平坐标，clientY表示鼠标在窗口中的垂直坐标。

可以通过监听drag事件、mousemove事件或其他拖动相关事件来获取鼠标位置。值得注意的是，drag事件只有在拖动开始时才会触发一次，而mousemove事件则会在鼠标移动时持续触发。

以下是使用mousemove事件获取鼠标位置的示例代码：

<!DOCTYPE html>
<html>
  <head>
    <title>获取拖动时的鼠标坐标</title>
    <style>
      #dragElement {
        width: 100px;
        height: 100px;
        background-color: red;
        position: absolute;
        left: 0;
        top: 0;
      }
    </style>
  </head>
  <body>
    <div id="dragElement"></div>

    <script>
      var dragElement = document.getElementById("dragElement");

      document.addEventListener("mousemove", function (event) {
        var mouseX = event.clientX;
        var mouseY = event.clientY;

        console.log("鼠标位置：X-" + mouseX + "，Y-" + mouseY);
      });
    </script>
  </body>
</html>