鼠标框选（上篇）

鼠标框选（上篇）

2017-07-15 22:00 by JerremyZhang, ... 阅读, ... 评论, 收藏, 编辑

　　好久没有更新博客了，感觉有些手生了，最近换了工作，有传统软件公司跳槽到互联网公司，由原来主做后端，兼职前端变成了全职前端；第一次进入互联网公司，感觉和传统软件公司或技术服务类公司相比，技术范围很浓，大家对技术更有追求，学习更主动，我很喜欢这种气氛，虽然很忙，但是感觉很充实，以后前端这部分开启，把所学所得记录下来，为自己也为分享，本篇作为开篇，聊聊鼠标框选操作。

1、应用描述

　　对于鼠标框选，网上已有粗糙的实现方案，这里也注重思路和方案，逐步对代码进行完善。

　　鼠标框选，其实是对传统选择的一个升级，想象这样一种场景，用户选择单选框／复选框，多行多列等，如果需要用户单击选择，数量越多，用户体验越差，对于用户来说，越简单的操作，体验越好，如果通关鼠标拖动，产生一个框选区域，可以对框选区域内所有元素进行操作，也不失为批量操作的一个选择。

2、实现思路

　　所谓框选，直白一点就是绘制一个矩形，而绘制矩形的方式有很多，比如创建一个div／基于cavans绘制一个矩形，创建一个svg矩形，这里我们以最简单的一种方式来实现，基于div来实现。

　　整个过程如下：

　　1、创建一个div

　　2、添加到dom

　　3、监听mousemove事件，重绘div

　　如果如果只是简单框选，该过程已ok，如果需要框选区高亮，则过程需要如下重构：

　　1、创建一个div作为选择框，创建四个div分表作为上、下、左、右四个mask

　　2、添加div到dom，同时添加mask到dom

　　3、监听mousemove事件，重绘div和mask

3、代码框架

　　今天作为上篇，仅提出实现思路及未经测试的非伪代码，下篇会加入继续完善，基本代码框架如下：

  1 ; (function ($) {
  2 
  3     /**
  4      * 坐标点
  5      * @param {*} x 
  6      * @param {*} y 
  7      */
  8     function Point(x, y) {
  9         this.x = x;
 10         this.y =