jQuery UI API – 可选择小部件（Selectable Widget）（长文讲解）

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

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

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

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

前言：让网页交互更直观的“画框工具”

在现代网页开发中，用户对交互体验的要求日益提高。例如，在日历应用中选择日期范围、在待办事项列表中批量操作条目，或是设计工具中框选多个元素——这些场景都需要一种直观的“选择”功能。jQuery UI API – 可选择小部件（Selectable Widget） 正是为这类需求量身打造的解决方案。

它像一个灵活的“画框”，允许用户通过鼠标拖拽定义选择区域，并实时反馈被选中的元素。对于编程初学者和中级开发者而言，掌握这一工具不仅能提升项目效率，还能为用户带来更自然的操作体验。

一、快速入门：从零开始构建可选择区域

1.1 准备工作：引入jQuery UI库

使用Selectable Widget前，需先引入jQuery和jQuery UI的核心文件。可通过CDN加载：

<!-- 引入jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 引入jQuery UI CSS -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<!-- 引入jQuery UI核心 -->
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>

提示：jQuery UI的样式文件（如themes/base/jquery-ui.css）定义了默认视觉效果，若需自定义风格，可替换为其他主题文件。

1.2 第一个案例：创建基础可选择列表

以下代码展示了一个简单的可选择列表：

<div id="selectable">
  <div class="ui-widget-content">Item 1</div>
  <div class="ui-widget-content">Item 2</div>
  <div class="ui-widget-content">Item 3</div>
</div>

<script>
$(function() {
  $("#selectable").selectable();
});
</script>

运行效果：

• 用户拖拽鼠标时，会生成半透明蓝色的“选择框”
• 点击或拖拽覆盖的<div>元素会高亮显示
• 选择结束后，可通过ui-selected类名获取被选中的元素

二、深入配置：自定义选择行为与视觉效果

2.1 核心配置选项

通过参数对象可调整Selectable Widget的交互逻辑和外观，常见选项如下：

示例：仅允许选择特定子元素

$("#selectable").selectable({
  filter: "div.special-item"
});

2.2 视觉效果定制

通过CSS可修改默认样式，例如调整选择框的颜色和透明度：

/* 修改选择框的背景色 */
#selectable .ui-selecting {
  background: #ff6b6b8a !important;
}

/* 修改已选中的元素样式 */
#selectable .ui-selected {
  background: #ff6b6b;
  color: white;
}

三、事件驱动：响应选择过程的每个阶段

Selectable Widget提供了多个事件钩子，允许开发者在选择的不同阶段执行自定义逻辑：

3.1 常用事件列表

3.2 实战案例：统计选择数量并显示提示

$("#selectable").selectable({
  stop: function(event, ui) {
    const selectedItems = $(this).find(".ui-selected").length;
    alert(`您已选择 ${selectedItems} 个项目`);
  }
});

四、进阶技巧：与表单、拖放等组件联动

4.1 结合表单元素传递选择结果

在表单提交时，可将选中元素的值通过隐藏输入传递：

<form>
  <input type="hidden" name="selectedItems" id="selectedItems">
  <button type="submit">提交选择</button>
</form>

<script>
$("#selectable").on("selectableselect", function() {
  const selected = $(this).find(".ui-selected").map(function() {
    return $(this).text();
  }).get().join(",");
  $("#selectedItems").val(selected);
});
</script>

4.2 与Draggable组件联动实现“拖拽分组”

通过组合Draggable和Selectable，可实现类似“分类垃圾桶”的功能：

// 初始化可拖拽元素
$(".draggable-item").draggable({
  helper: "clone",
  revert: "invalid"
});

// 初始化可接收区域
$(".droppable-area").droppable({
  drop: function(event, ui) {
    $(this).append(ui.draggable);
  }
});

五、常见问题与解决方案

5.1 选择区域未生效的排查步骤

• 检查DOM结构：确保父容器设置了position: relative
• 验证CSS冲突：使用浏览器开发者工具检查.ui-selecting类是否被覆盖
• 确认事件绑定：通过console.log验证事件是否触发

5.2 移动端适配优化

默认的鼠标事件在移动端表现不佳，可通过以下方式增强兼容性：

$("#selectable").selectable({
  start: function(event, ui) {
    if (event.type === "touchstart") {
      $(this).data("ui-selectable")._mouseStarted = true;
    }
  }
});

结论：用可选择小部件提升用户操作流畅度

jQuery UI API – 可选择小部件（Selectable Widget） 是构建交互式网页的得力工具。它通过直观的“框选”操作，将复杂的元素选择逻辑封装为简单的API调用。无论是基础的列表选择，还是与表单、拖放功能的深度整合，开发者都能通过本文的案例快速上手。

建议读者在项目中尝试以下实践：

1. 为不同场景设计独特的视觉反馈（如渐变色选择框）
2. 结合localStorage记录用户的上次选择状态
3. 在响应式设计中动态调整选择灵敏度

掌握这一工具后，您将能更高效地将“用户意图”转化为“程序行为”，创造出更人性化的网页应用。