jQuery 在拖动时克隆节点

在本文中，我们将介绍如何在使用 jQuery 时，在拖动时克隆节点。拖动是一种常见的用户交互方式，通过拖动元素，我们可以改变它们的位置、顺序或其他样式。但有时候我们希望在拖动过程中克隆节点，而不是移动原始节点。这种情况下，jQuery 提供了一种简单的方法来实现这个效果。

阅读更多：jQuery 教程

使用 clone 方法复制节点

首先，我们需要使用 jQuery 的 clone 方法来复制要拖动的节点。clone 方法将原始节点的副本创建出来，复制了节点的所有属性和子元素。下面是一个简单的示例，展示了如何使用 clone 方法来复制一个 div 节点：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery Clone Node on Drag</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    .drag-box {
      width: 100px;
      height: 100px;
      background-color: #f44336;
      margin: 20px;
      cursor: move;
    }
  </style>
</head>
<body>
  <div id="dragBox" class="drag-box"></div>

  <script>
    $("#dragBox").draggable();
  </script>
</body>
</html>

在上面的示例中，我们首先给 div 元素添加了一个 id 属性为 “dragBox”，以及一个 class 属性为 “drag-box”。然后使用 CSS 来定义 .drag-box 类的样式，使其具有一定的宽度、高度和背景颜色，并设置了 cursor 属性为 “move”，以使鼠标显示为可移动的状态。

接下来，我们在 JavaScript 代码中使用 jQuery 的 draggable 方法来使 div 元素可拖动。此时，拖动元素时，原始节点会跟随鼠标移动。

使用 helper 选项来克隆节点

然而，上述示例中的拖动效果只是移动原始节点，并没有克隆节点。要实现克隆节点的效果，我们可以使用 jQuery 的 draggable 方法的 helper 选项。helper 选项允许我们指定一个函数来返回希望在拖动时显示的 HTML 或 DOM 元素。在该函数中，我们可以使用 clone 方法来复制节点。

下面是一个示例，展示了如何使用 helper 选项将拖动时克隆节点：

$("#dragBox").draggable({
  helper: function() {
    return $(this).clone();
  }
});

在上面的示例中，我们给 draggable 方法传递了一个对象作为参数，并在该对象中设置了 helper 选项为一个函数。该函数中使用 clone 方法来复制拖动的节点，并返回复制的结果作为拖动时显示的节点。

现在，当你在页面上拖动 dragBox 元素时，将显示一个与原始节点相同的克隆节点。原始节点将保留在原来的位置，并且拖动的副本将跟随鼠标移动。

自定义克隆节点的样式

除了复制节点本身的属性和子元素外，我们还可以使用 clone 方法来自定义克隆节点的样式。下面是一个示例，展示了如何自定义克隆节点的样式：

$("#dragBox").draggable({
  helper: function() {
    var clone = $(this).clone();
    clone.css({
      backgroundColor: "blue",
      opacity: 0.5
    });
    return clone;
  }
});

在上面的示例中，我们在 clone 方法的返回值上调用了 css 方法，通过传入一个对象来设置克隆节点的样式。在这里，我们将背景颜色设置为蓝色，透明度设置为 0.5。

现在，当你在页面上拖动 dragBox 元素时，将显示一个背景为蓝色、透明度为 0.5 的克隆节点。