javascript 网格拖拽-js面板实现拖拉拽：代码示例

温馨提示：这篇文章已超过288天没有更新，请注意相关的内容是否还可用！

JavaScript 网格拖拽是一种常见的交互效果，它可以让用户通过鼠标拖动网格中的元素来改变它们的位置。下面是一个简单的示例代码，演示了如何使用 JavaScript 实现网格拖拽效果。

我们需要为网格中的每个元素添加拖拽事件监听器。在示例代码中，我们使用了一个名为"draggable"的 CSS 类来标记可拖拽的元素。当用户点击并拖动一个可拖拽元素时，我们会记录下鼠标的初始位置和元素的初始位置。


<!DOCTYPE html>
<html>
<head>
  <style>
    .grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-gap: 10px;
    }
    .draggable {
      background-color: #f1f1f1;
      padding: 10px;
      text-align: center;
      cursor: move;
    }
  </style>
</head>
<body>
  <div class="8699-769f-f91a-2a0e grid">
    <div class="769f-f91a-2a0e-8d5b draggable">1</div>
    <div class="f91a-2a0e-8d5b-da43 draggable">2</div>
    <div class="2a0e-8d5b-da43-d201 draggable">3</div>
    <div class="8d5b-da43-d201-f424 draggable">4</div>
    <div class="da43-d201-f424-7b92 draggable">5</div>
    <div class="d201-f424-7b92-407c draggable">6</div>
  </div>
  <script>
    const draggables = document.querySelectorAll('.draggable');
    let currentDraggable = null;
    let initialX = 0;
    let initialY = 0;
    let offsetX = 0;
    let offsetY = 0;
    draggables.forEach(draggable => {
      draggable.addEventListener('mousedown', dragStart);
      draggable.addEventListener('mouseup', dragEnd);
      draggable.addEventListener('mousemove', drag);
    });
    function dragStart(e) {
      currentDraggable = e.target;
      initialX = e.clientX;
      initialY = e.clientY;
      const rect = currentDraggable.getBoundingClientRect();
      offsetX = initialX - rect.left;
      offsetY = initialY - rect.top;
      currentDraggable.style.zIndex = '1';
      currentDraggable.style.position = 'absolute';
    }
    function dragEnd() {
      currentDraggable.style.zIndex = '0';
      currentDraggable.style.position = 'static';
      currentDraggable = null;
    }
    function drag(e) {
      if (currentDraggable) {
        const x = e.clientX - offsetX;
        const y = e.clientY - offsetY;
        currentDraggable.style.left = `${x}px`;
        currentDraggable.style.top = `${y}px`;
      }
    }
  </script>
</body>
</html>

在上面的代码中，我们首先定义了一个网格容器，使用 CSS 的 `grid` 属性将其划分为 3 列。每个可拖拽元素都有一个名为"draggable"的 CSS 类，用于标记它们可被拖拽。

在 JavaScript 部分，我们首先通过 `querySelectorAll` 方法获取了所有具有"draggable"类的元素，并为它们添加了三个事件监听器：`mousedown`、`mouseup` 和 `mousemove`。当用户按下鼠标按钮时，`dragStart` 函数会被触发，记录下鼠标的初始位置和元素的初始位置。我们将当前拖拽的元素的 `z-index` 设置为 1，使其显示在其他元素的上方，并将其 `position` 设置为 `absolute`，使其脱离文档流。

在 `dragEnd` 函数中，我们将当前拖拽的元素的 `z-index` 设置回 0，将其 `position` 设置为 `static`，使其回到正常的文档流中。

在 `drag` 函数中，我们根据鼠标的当前位置和初始位置计算出元素应该移动的距离，并将其应用到元素的 `left` 和 `top` 样式中，实现元素的拖拽效果。

通过以上的代码示例，我们可以实现一个简单的 JavaScript 网格拖拽效果。