📅 最后修改于: 2023-12-03 15:32:10.802000 🧑 作者: Mango
jQuery UI 是建立在 jQuery 库上的一个 UI 插件集，提供了一些常见的 UI 组件和效果，例如拖动、排序、选择和调整大小等功能。其中，可拖动轴选项（Draggable Axis Options）允许用户在限制轴线方向上进行拖动，这在创建交互式界面时非常有用。
首先，您需要在您的 HTML 中引入 jQuery UI 库。你可以直接下载 jQuery UI，或者使用 CDN（内容分发网络）。以下是一个例子：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery UI 可拖动轴选项</title>
<!-- 引入 jQuery 库 -->
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<!-- 引入 jQuery UI 库 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-ui@1.12.1/jquery-ui.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery-ui@1.12.1/jquery-ui.min.js"></script>
</head>
<body>
<!-- 这里是您的 HTML 代码 -->
</body>
</html>
然后，您需要在您的 JavaScript 中初始化可拖动轴选项。以下是一个例子：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery UI 可拖动轴选项</title>
<!-- 引入 jQuery 库 -->
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<!-- 引入 jQuery UI 库 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-ui@1.12.1/jquery-ui.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery-ui@1.12.1/jquery-ui.min.js"></script>
<style>
/* 样式 */
.box {
width: 100px;
height: 100px;
background-color: #f00;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
$(document).ready(function() {
$(".box").draggable({
axis: "x"
});
});
</script>
</body>
</html>
如上所述，axis: "x" 表示只能沿 X 轴移动。
以下是可用于可拖动轴选项的选项列表：
| 选项 | 类型 | 描述 |
| --- | --- | --- |
| axis | string | x 表示沿 X 轴移动， y 表示沿 Y 轴移动。默认是不限制 |
| containment | element/string/array | 约束拖动范围。默认是 document |
| cursor | string | 拖动时的光标样式。默认是 auto |
| cursorAt | object | 光标应该位于拖动对象的哪个位置。默认是 { left: 50, top: 50 } |
| delay | number | 开始拖动之前的毫秒数。默认是 0 |
| distance | number | 拖动的像素数，开始拖动之前。默认是 1 |
| grid | array | 在网格上拖动。数组的两个值分别为水平和垂直间隔。默认是 false |
| handle | string/element | 拖动句柄元素。默认是整个拖动对象 |
| helper | string/element/function | 创建的拖动对象。默认是原始对象 |
| opacity | number | 拖动对象的不透明度。默认是 1 |
| revert | boolean/number/function | 拖动对象超出约束区域时是否还原。默认是 false |
| scroll | boolean | 翻滚页面时拖动。默认是 true |
| scrollSensitivity | number | 拖动到边缘时开始滚动页面的距离。默认是 20 |
| scrollSpeed | number | 拖动过程中页面滚动的速度。默认是 20 |
| snap | boolean | 吸附到网格中的像素。默认是 false |
| snapMode | string | 吸附模式。可以是 inner、outer 或 both。默认是 outer |
| snapTolerance | number | 与网格对齐的像素数。默认是 20 |
| stack | string | 拖动对象时所叠放的对象的选择器 |
| zIndex | number | 拖动对象的 z-index 值。默认是 1 |
使用 jQuery UI 的可拖动轴选项，可以在限制轴线方向上进行拖动，创建更加交互式的 UI。具体怎么做，详见上文。