下面是JS实现的简单拖拽功能示例的完整攻略：

一、准备工作

在HTML文档中添加一个元素，我们称之为“拖拽元素”，该元素将被用户用鼠标拖动。

<div id="drag">拖拽我</div>

二、绑定事件

为了使用户能够拖动该元素，我们需要将拖拽元素上的鼠标事件绑定到JavaScript函数。

const drag = document.getElementById('drag');
let isDragging = false;
let dragStartX, dragStartY;
let currentX, currentY;

drag.addEventListener('mousedown', dragStart);
drag.addEventListener('mousemove', dragMove);
drag.addEventListener('mouseup', dragEnd);

function dragStart(e) {
  isDragging = true;
  dragStartX = e.clientX - drag.offsetLeft;
  dragStartY = e.clientY - drag.offsetTop;
}

function dragMove(e) {
  if (isDragging) {
    currentX = e.clientX - dragStartX;
    currentY = e.clientY - dragStartY;

    drag.style.left = `${currentX}px`;
    drag.style.top = `${currentY}px`;
  }
}

function dragEnd() {
  isDragging = false;
}

这里我们绑定了三个事件：mousedown、mousemove和mouseup。

mousedown事件发生在用户点击鼠标按钮的时候。在我们的示例中，这是拖拽操作的起点。mousemove事件发生在用户移动鼠标，并且正在拖拽元素的时候。这里我们将元素的位置设置为鼠标光标的位置。mouseup事件发生在用户松开鼠标按钮并完成拖拽操作的时候。

三、添加样式

为了让拖拽元素看起来更美观，我们可以添加一些CSS样式。

#drag {
  position: absolute;
  top: 100px;
  left: 100px;
  width: 100px;
  height: 100px;
  background-color: #ff0000;
  color: #ffffff;
  text-align: center;
  line-height: 100px;
  cursor: move;
}

在这个示例中，我们将#drag元素的位置设置为绝对定位，使其能够被拖拽。我们还设置了元素的宽度、高度、背景颜色、文本颜色、文本对齐和光标类型。

四、完整示例

接下来，我们将上述代码组装起来，形成一个完整的示例。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>JS实现的简单拖拽功能示例</title>
    <style>
      #drag {
        position: absolute;
        top: 100px;
        left: 100px;
        width: 100px;
        height: 100px;
        background-color: #ff0000;
        color: #ffffff;
        text-align: center;
        line-height: 100px;
        cursor: move;
      }
    </style>
  </head>
  <body>
    <div id="drag">拖拽我</div>
    <script>
      const drag = document.getElementById('drag');
      let isDragging = false;
      let dragStartX, dragStartY;
      let currentX, currentY;

      drag.addEventListener('mousedown', dragStart);
      drag.addEventListener('mousemove', dragMove);
      drag.addEventListener('mouseup', dragEnd);

      function dragStart(e) {
        isDragging = true;
        dragStartX = e.clientX - drag.offsetLeft;
        dragStartY = e.clientY - drag.offsetTop;
      }

      function dragMove(e) {
        if (isDragging) {
          currentX = e.clientX - dragStartX;
          currentY = e.clientY - dragStartY;

          drag.style.left = `${currentX}px`;
          drag.style.top = `${currentY}px`;
        }
      }

      function dragEnd() {
        isDragging = false;
      }
    </script>
  </body>
</html>

五、示例说明

示例一

我们可以将上述示例修改一下，以实现多个拖拽元素的拖拽功能。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>JS实现的简单拖拽功能示例</title>
    <style>
      .drag {
        position: absolute;
        top: 100px;
        left: 100px;
        width: 100px;
        height: 100px;
        background-color: #ff0000;
        color: #ffffff;
        text-align: center;
        line-height: 100px;
        cursor: move;
      }
    </style>
  </head>
  <body>
    <div class="drag">拖拽我</div>
    <div class="drag">拖拽我</div>
    <script>
      const dragElements = document.querySelectorAll('.drag');
      let isDragging = false;
      let dragStartX, dragStartY;
      let currentX, currentY;

      dragElements.forEach(dragElement => {
        dragElement.addEventListener('mousedown', dragStart);
        dragElement.addEventListener('mousemove', dragMove);
        dragElement.addEventListener('mouseup', dragEnd);
      });

      function dragStart(e) {
        isDragging = true;
        dragStartX = e.clientX - this.offsetLeft;
        dragStartY = e.clientY - this.offsetTop;
      }

      function dragMove(e) {
        if (isDragging) {
          currentX = e.clientX - dragStartX;
          currentY = e.clientY - dragStartY;

          this.style.left = `${currentX}px`;
          this.style.top = `${currentY}px`;
        }
      }

      function dragEnd() {
        isDragging = false;
      }
    </script>
  </body>
</html>

在这个示例中，我们给所有拖拽元素添加了相同的类名，并使用querySelectorAll获取它们。我们还修改了元素的类选择器，将其设置为.drag。最后，我们将事件监听器绑定到每个拖拽元素上。

示例二

我们也可以使用event.target属性来获取拖拽元素。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>JS实现的简单拖拽功能示例</title>
    <style>
      .drag {
        position: absolute;
        top: 100px;
        left: 100px;
        width: 100px;
        height: 100px;
        background-color: #ff0000;
        color: #ffffff;
        text-align: center;
        line-height: 100px;
        cursor: move;
      }
    </style>
  </head>
  <body>
    <div class="drag">拖拽我</div>
    <div class="drag">拖拽我</div>
    <script>
      const container = document.body;
      let isDragging = false;
      let dragElement = null;
      let dragStartX, dragStartY;
      let currentX, currentY;

      container.addEventListener('mousedown', dragStart);
      container.addEventListener('mousemove', dragMove);
      container.addEventListener('mouseup', dragEnd);

      function dragStart(e) {
        if (e.target.classList.contains('drag')) {
          isDragging = true;
          dragElement = e.target;
          dragStartX = e.clientX - dragElement.offsetLeft;
          dragStartY = e.clientY - dragElement.offsetTop;
        }
      }

      function dragMove(e) {
        if (isDragging) {
          currentX = e.clientX - dragStartX;
          currentY = e.clientY - dragStartY;

          dragElement.style.left = `${currentX}px`;
          dragElement.style.top = `${currentY}px`;
        }
      }

      function dragEnd() {
        isDragging = false;
        dragElement = null;
      }
    </script>
  </body>
</html>

在这个示例中，我们使用了一个更通用的事件绑定方法。我们将所有事件绑定到文档的根元素上，并使用event.target属性来获取拖拽元素。这样，在用户点击和拖拽元素的过程中，不必严格限制鼠标的移动范围。同时，我们将所需的状态存储在全局变量中，以允许多个拖拽元素在同一时间进行拖拽操作。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS实现的简单拖拽功能示例 - Python技术站

JS实现的简单拖拽功能示例

一、准备工作

二、绑定事件

三、添加样式

四、完整示例

五、示例说明

示例一

示例二

相关文章