背景：公司需要一个每半小时一个时间段的选择功能，共48个点，效果如下
深色代表选中，浅色代表不选
正题：
需要解决的问题：
1、布局问题，这里直接选择流式布局，flex 菜鸟学习传送
2、如何拖选：鼠标按下开启拖选，鼠标抬起结束拖选，鼠标进入选中（反选）
3、鼠标移动过快，enter事件监听不到：判断当前拖选方向，记录上一次拖选经过的Id，范围选中
源码已上传? 打开即用，如果帮到你了，给个星
gitee:?https://gitee.com/tomato23132313/range-drag-selection
实现效果：
核心代码：
methods: {
subenter: function (item) {
//拖选中子元素
if (this.isDrop) {
if (this.lastItemId != item.id) {
var min = this.lastItemId < item.id ? this.lastItemId : item.id;
var max = this.lastItemId < item.id ? item.id : this.lastItemId;
if (this.lastItemId - item.id < 0) {
//正方向
for (
var i = min;
i < Math.abs(this.lastItemId - item.id) + min;
i++
) {
this.subData[i].check = !this.subData[i].check;
}
} else {
//反方向
for (var i = max - 2; i > min - 2; i--) {
this.subData[i].check = !this.subData[i].check;
}
}
this.lastItemId = item.id;
}
}
},
subdown: function (item) {
//单个选中子元素
this.lastItemId = item.id;
item.check = !item.check;
},
boxdown: function () {
//鼠标按下开始拖选
this.isDrop = true;
},
boxup: function () {
//鼠标抬起取消拖选
this.isDrop = false;
},
boxleave: function () {
//当鼠标移出区域块时，视为取消拖选
this.isDrop = false;
},
