异常教程

jQuery UI API 类别 – 选择器（手把手讲解）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战(已更新的所有项目都能学习) / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新开坑项目:《Spring AI 项目实战》 正在持续爆肝中，基于 Spring AI + Spring Boot 3.x + JDK 21...， 点击查看 ;
  • 《从零手撸：仿小红书（微服务架构）》 已完结，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;演示链接： http://116.62.199.48:7070 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

前言

在前端开发中，jQuery UI API 类别 – 选择器是提升用户体验和交互功能的核心工具之一。无论是构建可拖拽的界面元素、可选择的任务列表，还是实现动态的标签页切换，选择器相关的 API 都能简化复杂操作，让开发者专注于逻辑设计。本文将从基础概念出发，逐步解析 jQuery UI 中选择器类别的核心 API，结合实际案例和代码示例，帮助开发者快速掌握其原理与应用。

基础概念：选择器在 jQuery UI 中的角色

在 jQuery UI 的生态中，“选择器”（如 Selectable、Draggable、Droppable 等）属于交互组件类别。它们通过封装浏览器的原生事件（如鼠标点击、拖动等），为开发者提供了一套直观且易用的 API，以实现常见的用户交互需求。

可以将这些选择器类比为“工具箱中的专业工具”：

  • Selectable：像“磁吸笔”一样，允许用户通过拖拽框选多个元素。
  • Draggable：如同“魔方”般，让元素可以被拖动到任意位置。
  • Droppable：类似“指定区域”的收纳盒，用于接收被拖拽的元素。

这些工具通过统一的 API 设计模式（如初始化方法、事件监听、配置参数）降低了学习成本，同时保持了功能的灵活性。

核心 API 分类与详解

1. Selectable：多元素选择器

Selectable 是 jQuery UI 中用于实现“框选”功能的组件。它允许用户通过鼠标拖拽一个矩形区域，选择所有被覆盖的元素。

基础用法

$(function() {  
  $("#container").selectable({  
    filter: "li", // 仅允许选择 <li> 元素  
    selected: function(event, ui) {  
      console.log("选中的元素：", ui.selected);  
    }  
  });  
});

关键参数说明：
| 参数名 | 作用描述 |
|-----------------|----------------------------------|
| filter | 指定可被选择的元素类型（如 li、div） |
| distance | 鼠标移动多少像素后触发选择动作 |
| stop | 拖拽结束后触发的回调函数 |

实际案例：任务列表的多选功能

假设有一个待办事项列表，用户需要批量选择任务：

<ul id="task-list">  
  <li>完成报告</li>  
  <li>回复邮件</li>  
  <li>安排会议</li>  
</ul>

通过 Selectable，用户只需拖拽框选即可选择多个任务，并触发后续操作（如批量删除或标记为已完成）。

2. Draggable & Droppable：拖放交互

Draggable 和 Droppable 是一对经典的组合 API，分别控制元素的“可拖拽”和“可放置”属性。

Draggable 的基本配置

$(function() {  
  $(".draggable-box").draggable({  
    containment: "parent", // 限制拖拽范围在父容器内  
    revert: "invalid" // 若未放置到有效区域，拖拽后返回原位  
  });  
});

Droppable 的事件监听

$(function() {  
  $("#drop-area").droppable({  
    accept: ".draggable-box", // 仅接受指定类名的元素  
    drop: function(event, ui) {  
      $(this).append(ui.draggable); // 将拖拽元素放入目标区域  
    }  
  });  
});

关键参数对比：
| Draggable 参数 | Droppable 参数 |
|-----------------------|-------------------------|
| axis | 限制拖拽方向（如 x 或 y） |
| scroll | 是否允许拖拽时滚动页面 |
| tolerance | 确定元素是否进入有效区域的条件（如 touch、pointer） |

实际案例：文件管理器的拖放操作

模拟一个文件夹拖放功能：

<div id="source-folder">  
  <div class="file">文档1.pdf</div>  
  <div class="file">图片2.jpg</div>  
</div>  
<div id="target-folder"></div>

通过 Draggable 和 Droppable，用户可以将文件从源文件夹拖拽到目标文件夹，实现直观的文件移动操作。

3. 可访问性与事件管理

选择器 API 的功能不仅依赖于视觉反馈，还需通过事件系统与业务逻辑深度结合。例如：

使用事件触发状态更新

$(function() {  
  $("#sortable").sortable({  
    update: function() {  
      // 将排序后的元素顺序发送到服务器  
      const order = $(this).sortable("serialize");  
      console.log("新顺序：", order);  
    }  
  });  
});

结合 CSS 实现视觉反馈

通过自定义 CSS 类，可以在拖拽时动态修改元素样式，增强用户体验：

.ui-selecting { background: #FECA40; } /* 正在选择中的元素 */  
.ui-selected { background: #F44336; } /* 已选中的元素 */

进阶技巧与常见问题

1. 嵌套元素的选择冲突

当元素存在父子层级时，Selectable 可能因事件冒泡导致误选。可通过 cancel 参数排除特定子元素：

$("#container").selectable({  
  cancel: ".unselectable" // 排除带有 unselectable 类的元素  
});

2. 动态生成元素的兼容性

如果页面元素是动态加载的，需在元素生成后重新初始化选择器：

function addNewTask(taskText) {  
  const $newTask = $("<li>" + taskText + "</li>");  
  $("#task-list").append($newTask);  
  $("#task-list").selectable("refresh"); // 刷新选择器状态  
}

3. 移动端适配优化

默认情况下，jQuery UI 的选择器基于鼠标事件设计。若需适配触屏设备，可引入 jquery-ui-touch-punch 插件：

<script src="jquery.ui.touch-punch.min.js"></script>

实战案例：可交互的待办事项应用

目标需求

构建一个支持以下功能的待办事项列表：

  1. 可框选多个任务并批量删除。
  2. 可拖拽任务到“已完成”区域。

实现步骤

1. HTML 结构

<div id="todo-app">  
  <ul id="task-list" class="tasks">  
    <li>学习 jQuery UI</li>  
    <li>编写代码案例</li>  
    <li>测试功能</li>  
  </ul>  
  <div id="completed" class="drop-area">已完成</div>  
</div>

2. CSS 样式

#task-list li {  
  padding: 10px;  
  margin: 5px;  
  background: #fff;  
  border: 1px solid #ddd;  
}  
.ui-selected {  
  background: #a5d6a7 !important;  
}  
#completed {  
  border: 2px dashed #4CAF50;  
  padding: 20px;  
  margin-top: 20px;  
}

3. JavaScript 实现

$(function() {  
  // 初始化框选功能  
  $("#task-list").selectable({  
    filter: "li",  
    selected: function(event, ui) {  
      $(ui.selected).addClass("selected-task");  
    }  
  });  

  // 初始化拖拽功能  
  $(".tasks li").draggable({  
    revert: "invalid",  
    helper: "clone",  
    cursor: "move"  
  });  

  // 初始化放置区域  
  $("#completed").droppable({  
    accept: ".tasks li",  
    drop: function(event, ui) {  
      const $task = $(ui.draggable).clone();  
      $(this).append($task);  
      $(ui.draggable).remove();  
    }  
  });  

  // 批量删除按钮（假设存在）  
  $("#delete-selected").click(function() {  
    $(".selected-task").remove();  
  });  
});

结论

通过掌握 jQuery UI API 类别 – 选择器 的核心功能与技巧，开发者可以快速构建出交互丰富、用户体验友好的 Web 应用。无论是通过 Selectable 实现多元素选择，还是借助 Draggable 和 Droppable 创建动态拖放界面，这些 API 均体现了 jQuery UI 在简化复杂交互逻辑上的设计哲学。

建议读者在学习过程中，通过实际项目反复实践，逐步理解事件监听、状态管理与视觉反馈的结合方式。同时，结合现代前端框架（如 React 或 Vue）的生态，也可探索如何将 jQuery UI 的选择器功能与组件化开发模式融合，进一步提升开发效率。

最新发布

查看更多文章