jQuery UI 可通过事件排序

jQuery UI 提供了一个功能强大的事件排序插件，可以让您轻松地将列表和表格中的元素拖放进行排序。此插件可定制，可为拖动和拖放事件添加回调，并支持一个可选的回调函数，用于处理排序后的元素。

安装 jQuery UI

要使用事件排序插件，您需要先安装 jQuery UI。您可以从 jQuery UI 官方网站 下载和使用最新版本。

初始化事件排序

一旦您已经安装了 jQuery UI，就可以使用 sortable() 方法将元素列表添加到排序条中：

$( "#sortable" ).sortable();

在上面的代码中，我们为具有ID“sortable” 的元素列表添加了排序条。要向该列表中添加新元素，请使用以下代码：

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

添加事件回调

为了获得更多控制权，您可以添加拖动和拖放事件的回调函数。

$( "#sortable" ).sortable({
    start: function() {
        console.log("start");
    },
    stop: function() {
        console.log("stop");
    }
});

在上面的代码中，我们添加了 start() 和 stop() 回调函数。这些回调函数将分别在拖动开始和拖动停止时被调用。在这些回调函数内，您可以添加自己的代码来响应事件。

排序后的处理

默认情况下，排序后的元素将保留在排序条中。如果您需要对排序后的元素执行其他操作，可以添加一个回调函数。

$( "#sortable" ).sortable({
    stop: function(event, ui) {
        console.log(ui.item);
    }
});

在上面的代码中，我们添加了一个名为 stop() 的回调函数，该回调函数将在排序完成后被调用。在该函数中，我们使用 ui.item 来访问排序后的元素，可以将其存储到一个数组中，或将其发送到服务器等。

定制排序条

事件排序插件还支持多种选项和方法，可以让您自定义排序条的外观和行为。

例如，您可以使用 helper 选项来自定义排序时的占位符：

$( "#sortable" ).sortable({
    helper: "clone"
});

在上面的代码中，我们使用 helper 选项来指定排序时的占位符是克隆元素。您可以使用其他值，例如 original， function() 或它们的组合。

总结

现在您已经掌握了 jQuery UI 的事件排序插件。您可以使用此插件轻松地将元素列表拖放排序，并定制插件以满足特定的需求。