jQuery UI Draggable helper 选项

简介

jQuery UI Draggable 是一个可以让 HTML 元素拖动的插件。它允许您以简单的方式实现拖动和放置特性。helper 选项是 jQuery UI Draggable 插件中的一个选项，用于定义一个帮助器元素，该元素会随着鼠标拖动被拖动。helper 可以是一个 DOM 元素、jQuery 对象、函数或字符串。本文将详细介绍 jQuery UI Draggable helper 选项的各种用法和示例。

在 DOM 中添加 helper

你可以创建一个 DOM 元素作为 helper，将其添加到 DOM 中并将其传递给 helper 选项。

$("#draggable").draggable({
  helper: function() {
    return $("<div class='helper'></div>");
  }
});

上面的代码将创建一个 <div> 元素，并将其添加到 DOM 中作为 helper 元素。它包含 helper CSS 类，这使得您可以轻松地对其进行样式设置。helper 选项还可以设置为一个带有 HTML 代码段的字符串，例如：

$("#draggable").draggable({
  helper: "<div class='helper'></div>"
});

使用 jQuery 对象作为 helper

你还可以使用 jQuery 对象作为 helper。下面的代码使用一个 jQuery 对象作为 helper：

$("#draggable").draggable({
  helper: $( "<div class='helper'></div>" )
});

它与先前的 DOM 元素示例类似，但是它是 jQuery 对象。这使得您可以使用 jQuery 方法来进一步修改 helper 元素。

在 helper 中添加内容

helper 选项允许您向 helper 元素中添加内容。例如，您可以在 helper 中添加文本或其他 HTML 元素，如下所示：

$("#draggable").draggable({
  helper: function() {
    return $("<div class='helper'>Drag me</div>");
  }
});

上面的代码将向 helper 元素中添加文本 "Drag me"。

$("#draggable").draggable({
  helper: function(element) {
    return "<div class='helper'>" + element.text() + "</div>";
  }
});

上面的代码将向 helper 中添加与原始元素相同的文本。当拖动元素时，helper 文本将与原始元素一起移动。

改变 helper 的位置

helper 元素默认的位置是相对于鼠标位置的。我们可以使用 appendTo 选项将其添加到指定容器中，并使用 position 选项定义元素位置。

$("#draggable").draggable({
  helper: function() {
    return $("<div class='helper'>Drag me</div>")
      .appendTo("#some-container")
      .position({
        my: "left top",
        at: "left top",
        of: "#some-container"
      });
  }
});

上面的代码将 helper 元素放置在一个容器中，并且将其位置固定在容器的左上角。当拖动元素时，helper 元素将一直保持在该位置。

总结

helper 选项是 jQuery UI Draggable 插件中的重要选项，它允许您定义一个帮助器元素，该元素会随着鼠标拖动被拖动。helper 可以是一个 DOM 元素、jQuery 对象、函数或字符串。本文主要介绍了如何在 DOM 中添加 helper、使用 jQuery 对象作为 helper、在 helper 中添加内容以及如何改变 helper 的位置。如果你想了解更多 jQuery UI Draggable 的选项，可以查看 官方文档。