# RectSelect

**Repository Path**: QQXQQ/RectSelect

## Basic Information

- **Project Name**: RectSelect
- **Description**: 元素选区
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-08-29
- **Last Updated**: 2026-02-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: JavaScript

## README



# RectSelect

元素矩形选区组件

## 简介

RectSelect 是一个轻量级的网页元素矩形选区组件，允许用户通过鼠标拖拽在页面上绘制矩形选区，并获取选区内的元素信息。

## 功能特性

- 鼠标拖拽绘制矩形选区
- 实时显示选区范围
- 边框高亮显示选中的元素
- 支持多个目标元素的选区检测
- 基于 jQuery 和 jQuery UI 构建

## 目录结构

```
RectSelect/
├── js/
│   ├── RectSelect.js    # 核心选区逻辑
│   └── jquery.js        # jQuery 库
├── css/
│   └── jquery.ui.resizable.css  # jQuery UI 样式
├── Layout/
│   ├── ui/              # jQuery UI 组件
│   └── themes/          # UI 主题
├── RectSelect.html      # 演示页面 1
├── RectSelect1.html     # 演示页面 2
└── README.md            # 说明文档
```

## 使用方法

### 1. 引入依赖

```html
<script src="js/jquery.js"></script>
<script src="js/RectSelect.js"></script>
<link rel="stylesheet" href="css/jquery.ui.resizable.css">
```

### 2. HTML 结构

```html
<div id="BottomRightCenterContentDiv">
    <div id="div1">元素1</div>
    <div id="div2">元素2</div>
    <div id="div3">元素3</div>
    <!-- 更多元素 -->
    <div id="rect"></div>
</div>
```

### 3. 初始化选区

在页面加载完成后，RectSelect.js 会自动初始化选区功能。核心函数包括：

- `down(event)` - 鼠标按下开始选区
- `move(event)` - 鼠标移动更新选区
- `up(event)` - 鼠标松开结束选区
- `AddBorder(obj)` - 为选中元素添加边框

## 示例效果

打开 `RectSelect.html` 或 `RectSelect1.html` 查看完整演示：

1. 在页面上按下鼠标左键并拖拽
2. 拖拽过程中会显示蓝色矩形选区
3. 松开鼠标后，选区内的元素会显示红色边框
4. 选区坐标信息会实时更新

## 浏览器兼容

- Chrome
- Firefox
- Safari
- Edge
- Internet Explorer 8+

## 许可证

MIT License