📅 最后修改于: 2023-12-03 14:43:12.801000 🧑 作者: Mango
jQuery UI 提供了一个可排序的功能，可以使用户可以从一个列表中选择一个或多个项目，并将它们放入另一个列表中。在这个功能中，我们也可以实现取消选项的功能。
要实现可排序取消选项，我们需要使用 jQuery UI Sortable 插件，并将其配置为多选模式。我们还需要添加一个“取消”按钮，以便用户可以取消他们选择的项目。
以下是一个实现可排序取消选项的示例代码：
<!DOCTYPE html>
<html>
<head>
<title>Sortable Cancel Option</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
#sortable1, #sortable2 {
border: 1px solid #ccc;
padding: 10px;
width: 200px;
height: 200px;
float: left;
margin-right: 10px;
}
#sortable1 li, #sortable2 li {
background-color: #eee;
border: 1px solid #ccc;
margin: 5px;
padding: 5px;
list-style: none;
}
#sortable1 li.ui-state-highlight, #sortable2 li.ui-state-highlight {
background-color: #f4f4f4;
border: 1px solid #aaa;
color: #000;
}
#sortable2 li.ui-state-cancel {
background-color: #ffffcc;
border: 1px solid #aaa;
color: #000;
}
</style>
<script>
$(function() {
$("#sortable1, #sortable2").sortable({
connectWith: ".connectedSortable",
cancel: ".cancel"
}).disableSelection();
$("#btnCancel").click(function() {
$("#sortable2 .ui-state-highlight").addClass("ui-state-cancel").removeClass("ui-state-highlight");
});
});
</script>
</head>
<body>
<ul id="sortable1" class="connectedSortable">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ul id="sortable2" class="connectedSortable">
<li class="cancel">Cancel</li>
</ul>
<button id="btnCancel">Cancel Selection</button>
</body>
</html>
上述代码通过使用 jQuery UI Sortable 插件，创建了两个可排序的列表。列表之间可以通过参数 connectWith 相互连接。
另外，在 sortable1 列表中添加了三个项目，而在 sortable2 列表中，添加了一个取消选项的项目。这个取消项目的 class 被设置为 cancel，以便我们在配置排序时可以将其排除在外。
此外，我们添加了一个“取消选择”按钮，单击它将把当前列表中所有被高亮的项目变成取消项目。
在脚本中，我们使用以下代码将两个列表配置为可排序的：
$("#sortable1, #sortable2").sortable({
connectWith: ".connectedSortable",
cancel: ".cancel"
}).disableSelection();
这意味着 sortable1 和 sortable2 列表均可排序，它们通过参数 connectWith 相互连接，并且在排序时将排除 .cancel 元素。
最后，我们使用以下代码将高亮项目变成取消项目：
$("#btnCancel").click(function() {
$("#sortable2 .ui-state-highlight").addClass("ui-state-cancel").removeClass("ui-state-highlight");
});
这将在单击“取消选择”按钮时运行，在 sortable2 列表中找到所有被高亮的元素，并将它们的 class 设置为 ui-state-cancel。
通过上述方法，我们可以在 jQuery UI Sortable 插件中实现可排序取消选项的功能。这使得用户可以轻松地选择和取消项目，而不必担心不必要的麻烦。