jQuery UI 可排序删除事件(1)

📌 相关文章

📜 jQuery UI 可排序删除事件(1)

📅 最后修改于: 2023-12-03 15:32:10.851000 🧑 作者: Mango

jQuery UI 可排序删除事件

jQuery UI 是一个构建在 jQuery 上的 UI 开发框架，其中包括了一些常用的 UI 组件，比如按钮、对话框、拖放、排序等等。其中可排序组件通过拖动来改变元素顺序，可以使用 Sortable 方法来启用。

启用 Sortable 方法

Sortable 方法的调用非常简单，只需要为拖动的元素集合调用 Sortable 方法即可。例如：

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

这里的 #sortable 表示要排序的元素集合，可以是一个 ul 或 ol 元素。如果需要拖动的元素是一个列表，则需要为每个列表项设置一个 li 元素。

排序回调函数

在 Sortable 方法中，可以为三个回调函数设置回调函数：

start：当排序开始时调用该函数；
stop：当排序结束时调用该函数；
update：当拖动后的元素位置发生变化时调用该函数。

其中，start 和 stop 回调函数的参数为 ( event, ui )，而 update 回调函数的参数为 ( event, ui )。

删除事件

如果希望删除拖动的元素，可以通过 Sortable 的 remove 选项来实现。

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

这里的 remove 回调函数被调用时，表示当前拖动的元素被从可排序元素集合中删除。我们可以在该回调函数中删除该元素。

完整示例

下面是一个完整的示例，该示例启用了可排序组件，可以删除被拖动的元素：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sortable</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <style>
        #sortable {
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 60%;
        }
        #sortable li {
            margin: 0 3px 3px 3px;
            padding: 0.4em;
            font-size: 1.4em;
            height: 18px;
        }
    </style>
</head>
<body>

<ul id="sortable">
    <li class="ui-state-default">Item 1</li>
    <li class="ui-state-default">Item 2</li>
    <li class="ui-state-default">Item 3</li>
    <li class="ui-state-default">Item 4</li>
    <li class="ui-state-default">Item 5</li>
</ul>

<script>
    $( "#sortable" ).sortable({
        remove: function(event, ui) {
            ui.item.remove();
        }
    });
    $( "#sortable" ).disableSelection();
</script>
</body>
</html>

这里，我们首先启用了可排序组件，并为 remove 选项设置了一个回调函数，在该回调函数中删除了被拖动的元素。同时，我们可以使用 disableSelection() 方法来禁用拖动时的选中效果。

Markdown格式

# jQuery UI 可排序删除事件

jQuery UI 是一个构建在 jQuery 上的 UI 开发框架，其中包括了一些常用的 UI 组件，比如按钮、对话框、拖放、排序等等。其中可排序组件通过拖动来改变元素顺序，可以使用 Sortable 方法来启用。

## 启用 Sortable 方法

Sortable 方法的调用非常简单，只需要为拖动的元素集合调用 Sortable 方法即可。例如：

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