jQuery UI 可排序取消选项

jQuery UI是一个非常流行的JavaScript框架，用于创建丰富的Web应用程序用户界面。它包含了许多易于使用的组件，其中一个是“可排序”（sortable）。可排序允许用户通过拖动和放置来重新排序一组元素，这在某些情况下非常有用，如重新排列画廊中的图像或重新排列任务列表。

有时候，我们想要防止用户可以对某个可排序列表进行重排序。在这种情况下，我们可以使用jQuery UI的取消选项（cancel）来阻止这种操作。以下是如何使用取消选项来防止用户对可排序列表进行重排序：

<ul id="sortable">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

在上面的HTML代码中，我们有一个带有三个列表项的无序列表，它被称为“sortable”。

现在，我们将使用以下JavaScript代码来初始化可排序，并启用取消选项：

$(function() {
  $("#sortable").sortable({
    cancel: ":input, button" // 防止在输入字段和按钮上进行拖动
  });
});

上面的代码将在文档准备好时运行，并创建可排序的jQuery UI实例。我们还指定了一个取消选项，其中包含“:input”和“button”选择器。这告诉jQuery UI不要允许在输入字段和按钮上进行排序操作。您可以根据需要更改此选择器，以覆盖其他元素。

如果您想要允许用户对所有元素进行排序，除了某些特定的元素，那么可以使用“items”选项，并将其设置为您想要允许排序的元素的选择器。例如，如果您想要允许对所有列表项进行排序，但不允许对第一个列表项进行排序，可以使用以下代码：

$(function() {
  $("#sortable").sortable({
    items: "li:not(:first)" // 允许对除第一个以外的所有元素进行排序
  });
});

总之，使用jQuery UI的取消选项，您可以轻松防止用户对可排序列表进行重排序。