目标
如上图所示，支持选择一个范围的选择。思路主要就是知道起始点和结束点的位置， 然后根据一定的规则计算出中间的块。由于事件监听思路的不同，需要区分PC端和Mobile端。
pc端
使用的监听事件类型
- mousedown
- mouseover
- mouseup
思路
- 制造一些points， 每个point包含自己的行号和列号
- 模板中循环展示每个point对应的元素，每个元素上将这个point的行号和列号添加为自定义属性(方便事件委托时用)
关于为什么使用事件委托， 如果给每个元素绑定对应的监听事件，需要添加 行* 列 * 3 个listener, 页面性能很差
- 在父容器上进行上面的事件监听，拿到起始点和结束点对应的行号和列号， 然后根据业务需要，计算出在两点间的包含的格子
源码地址
Mobile端
使用的监听事件类型
- touchstart
- touchmove
- touchend
思路
由于touchmove处理时始终对应的是触发touchstart的元素， 无法拿到当前鼠标所在位置对应的元素(因此无法直接拿到元素上绑定的自定义属性), 所以换种思路。根据鼠标距离父元素的相对像素位置，计算出当前鼠标处于哪一个点
- 制造一些points， 每个point包含自己的行号、列号、左上角相对于父容器的坐标位置x,y
- 模板中循环展示每个point对应的元素
- 在父容器上进行上面的事件监听，通过鼠标位置获得对应的行号和列号， 然后根据业务需要，计算出在两点间的包含的格子
源码地址
由于codepen.io的原因， 无法模拟手机端， 需要将代码复制到本地vue2开发环境进行查看
