JS实现悬浮画板思路

1）情况：最近写了一个类似window界面，鼠标左击按下（不放开），然后移动，会出现一个方框的效果（如图一），然后选中虚线框中的td（其实就是td颜色改变），这里的内容，看似简单，但是对于一个我这个前端菜鸡的后端来说，简直就是噩梦，因为需要兼容谷歌，IE11和IE8。。。，好了，实际效果图（如图二，由于系统太旧，前端界面比较丑，不用在意，看思路就好）

2）实现效果：

图一：

 

图二：（虚线框，画框）

图三（框选中多个td，并且让其高亮显示，然后将选择的面板显示出来）

图四（点击选中单个td，并让其高亮显示，然后将选择的面板显示出来）

 

3）思路描述：

3.1）其实这里之所以可以操作，关键点在于，可操作的td之上，覆盖了一层遮罩层画板div（如图五）；

图五：（这个可以通过设置div颜色，在调试其位置时比较直观，而实际使用时，即通过透明度来使其隐藏起来，就像一个透明的遮罩层，然后我们通过绑定鼠标点击、鼠标移动、鼠标松开事件，实现具体的逻辑）

3.2）遮罩层位置和大小的设置

情况1：数据比较少（即，不会出现页面滚动效果的页面，相对直观简单，如图六），这图的条件是，A、B、C三点坐标都是正数，那么如图，宽高都可以通过三点坐标计算出来；而各点坐标，