jQuery UI 可拖动滚动选项(1)

📌 相关文章

📜 jQuery UI 可拖动滚动选项(1)

📅 最后修改于: 2023-12-03 14:43:12.609000 🧑 作者: Mango

jQuery UI 可拖动滚动选项

jQuery UI 是一个基于 jQuery 的用户界面插件库，其中包含了丰富的可定制组件，方便开发者快速构建交互体验良好的 Web 应用程序。其中之一便是可拖动滚动选项组件，本篇介绍如何使用该组件。

环境准备

在使用 jQuery UI 可拖动滚动选项组件之前，需要先准备好以下环境：

引入 jQuery
引入 jQuery UI
引入可拖动滚动选项所需的 CSS 样式文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>jQuery UI 可拖动滚动选项</title>
    <!-- 引入 jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- 引入 jQuery UI -->
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <!-- 引入可拖动滚动选项所需的 CSS 样式文件 -->
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  </head>
  <body>
    <div id="sortable">
      <div>选项1</div>
      <div>选项2</div>
      <div>选项3</div>
      <div>选项4</div>
      <div>选项5</div>
    </div>

    <script>
      // 初始化可拖动滚动选项
      $(function() {
        $("#sortable").sortable();
        $("#sortable").disableSelection();
      });
    </script>
  </body>
</html>

使用步骤

以下为使用可拖动滚动选项组件的步骤：

在 HTML 中设置选项列表

<div id="sortable">
  <div>选项1</div>
  <div>选项2</div>
  <div>选项3</div>
  <div>选项4</div>
  <div>选项5</div>
</div>

通过设置 div 元素作为选项列表的容器，每个选项通过 div 元素单独设置。

初始化可拖动滚动选项

$(function() {
  $("#sortable").sortable();
  $("#sortable").disableSelection();
});

使用 $("#sortable").sortable() 方法将 div 容器设为可拖动滚动选项，使用 $("#sortable").disableSelection() 方法移除选中文本。

高级选项

可拖动滚动选项组件还提供了以下高级选项：

axis: 可拖动的轴向， "x" 代表水平轴， "y" 代表垂直轴，默认为 "y"。
containment: 拖动范围的限制器，可以设置为 "parent" 代表只能在父元素内拖动，或者设置为某个选择器，代表只能在该选择器的元素内拖动。
cursor: 拖动过程中的鼠标样式。

$(function() {
  $("#sortable").sortable({
      axis: "y",
      containment: "parent",
      cursor: "move"
  });
  $("#sortable").disableSelection();
});

总结

以上就是使用 jQuery UI 可拖动滚动选项组件的全部步骤和高级选项，通过这个组件可以方便地实现选项列表的排序和交换，提高 Web 应用的交互体验。