分析该过程，可拆分成两个步骤：
该布局基于 element-ui，一个父容器 box，里面一个 mask div，一个 el-checkbox-group 块。其中父容器设置 position: relative子 mask 容器设置 position: absolute并且其宽、高、偏移值根据鼠标当前位置动态计算
该部分逻辑实际上可拆分为 4 个步骤：
1. 给 box 绑定 mousedown 事件
2. mousemove 事件，比较简单，只是更新 end_x，end_y 坐标
3. mouseup 事件，移除 mousemove、mouseup 事件，并调用判断方法
4. 处理框选逻辑
难点是如何判断元素是否被框选住
问题可转化为 框选矩形是否与 checkbox 矩形 相交或者包含在内,即 两矩形是否相交或者存在包含关系
假定矩形 A1 左上角坐标为 (x1,y1)矩形宽度为 width1,高度为 height1
假定矩形 A2 左上角坐标为 (x2,y2)矩形宽度为 width2,高度为 height2
画图分析，只看水平方向：
由图可以得出，x 方向上：
令 maxX = Math.max(x1 + width1, x2 + width2)
令 minX = Math.max(x1, x2)
若相交或包含则必满足： maxX - minX <= width1 + width2
同理可以容易得到 y 轴相交的判断
使用 Element.getBoundingClientRect()获取 dom 元素位置信息
该部分逻辑如下，比较简单
难点已经攻破，遍历 checkbox 集合，每个 checkbox 都执行上面的矩形相交判断，并进行相应的勾选处理，此处不再多累述
源码
END
1、打开vscode，创建一个H5规范的页面，用于演示js如何给下拉框设置默认值。
2、在页面中添加一个下拉框，并在html中通过selected属性，默认选择下拉框的第2个值。
3、在浏览器中打开页面，就可以看到这个下拉框默认选中的第二个下拉值。
4、在页面顶部引入jquery，由于本文将jquery和页面放在同一级目录，所以，直接使用了jquery文件名引用。如果不在同一级目录，引入的路径需要有层级。
5、在页面底部，添加jquery代码，使用.val()方法，在页面文档加载后，就马上修改下拉框的默认选中值为第三个值。此时是不管html的标签中selected属性原来是标记在哪一个选项的，都会改成新的值。
6、在浏览器中打开页面，这个时候就会看到，下拉框的默认值已经变成了第三个选项。
7、如果想要通过下拉框的显示值来设置默认选中项，就需要使用类似下面的语法：
$("#sltDef").find("option:contains('第4个选项')").attr("selected",true)
