jQuery UI Sortable Widget axis选项

以下是关于 jQuery UI Sortable Widget axis 选项的详细攻略：

jQuery UI Sortable Widget axis 选项

axis 选项用于限制拖拽的方向。当 axis 选项被设置为 "x" 时，只能在水平方向上拖拽；当 axis 选项被设置为 "y" 时，只能在垂直方向上拖拽。

语法

$( ".selector" ).sortable({
  axis: "x" // 或 "y"
});

其中，"x" 表示只能在水平方向上拖拽，"y" 表示只能在垂直方向上拖拽。

示例一：限制拖拽方向为水平方向

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

<script>
$( "#sortable" ).sortable({
  axis: "x"
});
</script>

这将初始化一个可排序的列表，并将 axis 选项设置为 "x"，从而限制拖拽方向为水平方向。

示例二：限制拖拽方向为垂直方向

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

<script>
$( "#sortable" ).sortable({
  axis: "y"
});
</script>

这将初始化一个可排序的列表，并将 axis 选项设置为 "y"，从而限制拖拽方向为垂直方向。

总结：

axis 选项用于限制拖拽的方向。当 axis 选项被设置为 "x" 时，只能在水平方向上拖拽；当 axis 选项被设置为 "y" 时，只能在垂直方向上拖拽。使用该选项可以方便地控制拖拽的方向。

以上是关于 jQuery UI Sortable Widget axis 选项的详细攻略，包括语法和两个示例。