📅 最后修改于: 2023-12-03 15:32:10.425000 🧑 作者: Mango
jQuery UI Sortable Widget 是 jQuery UI 库提供的一款拖拽排序的插件。其中轴选项 (axis) 可以帮助限制拖拽的方向，让用户只能在水平或垂直方向来拖拽排序。
轴选项可以通过在初始化时的 options 参数中设置来实现。示例代码如下：
$( ".sortable" ).sortable({
axis: "x" // 水平方向
});
上面的代码会将 class 为 "sortable" 的元素绑定 sortable 功能，并且限制只能在水平方向进行拖拽排序。
其他可选的选项有 "y"（垂直方向）和 "yx"（水平和垂直两个方向）。如果不设置此选项或者设置为 false，则默认支持任何方向的拖拽排序。
下面是一个完整的网页示例代码，演示了如何使用轴选项来实现水平方向的拖拽排序：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Sortable - Axis</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="//code.jquery.com/jquery-3.3.1.js"></script>
<script src="//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: 3px 3px 3px 0; padding: 1px; float: left; width: 45%; height: 80px; font-size: 4em; text-align: center; }
</style>
<script>
$( function() {
$( ".sortable" ).sortable({
axis: "x"
});
$( ".sortable" ).disableSelection();
} );
</script>
</head>
<body>
<ul class="sortable">
<li class="ui-state-default">One</li>
<li class="ui-state-default">Two</li>
<li class="ui-state-default">Three</li>
<li class="ui-state-default">Four</li>
<li class="ui-state-default">Five</li>
<li class="ui-state-default">Six</li>
</ul>
</body>
</html>
轴选项是 jQuery UI Sortable Widget 中十分实用的一个选项。通过限制拖拽的方向，可以更好地控制用户的操作，并提供更好的使用体验。