原生JS-实现框选功能Vue

分析该过程，可拆分成两个步骤：

鼠标框选一段区域
判断框选区域包含的 checkbox，进行对应处理

该布局基于 element-ui，一个父容器 box，里面一个 mask div，一个 el-checkbox-group 块。其中父容器设置 position: relative; 子 mask 容器设置 position: absolute; 并且其宽、高、偏移值根据鼠标当前位置动态计算

<div class="box" >
  <div class="mask" v-show="is_show_mask" :style="'width:'+mask_width+'left:'+mask_left+'height:'+mask_height+'top:'+mask_top">
  </div>
  <el-checkbox-group>
    <el-checkbox>
    </el-checkbox>
  </el-checkbox-group>
</div>

.box {
  width: 800px;
  margin: 20px auto;
  position: relative;
  overflow: hidden;
  user-select: none;
  .mask {
    position: absolute;
    background: #409eff;
    opacity: 0.4;
  }
}

该部分逻辑实际上可拆分为 4 个步骤：

鼠标按下 mousedown，记录当前起点坐标 start_x，start_y，并绑定 mousemove、mouseup 事件
鼠标移动 mousemove，实时更新终点坐标 end_x，end_y，即可框选矩形大小、位置
鼠标松开 mouseup，移除 mousemove、mouseup 事件
根据框选矩形大小、位置，计算在范围内的 checkbox 数量，进行对应处理

1. 给 box 绑定 mousedown 事件

<div class="box" @mousedown="handleMouseDown"></div>

handleMouseDown(event: any) {
  this.start_x = event.clientX;
  this.start_y = event.clientY;

  document.body.addEventListener('mousemove', this.handleMouseMove);
  document.body.addEventListener('mouseup', this.handleMouseUp);
}

2.mousemove 事件，比较简单，只是更新 end_x，end_y 坐标

handleMouseMove(event: MouseEvent) {
  this.end_x = event.clientX;
  this.end_y = event.clientY;
}

3.mouseup 事件，移除 mousemove、mouseup 事件，并调用判断方法

handleMouseUp() {document.body.removeEventListener('mousemove', this.handleMouseMove);
  document.body.removeEventListener('mouseup', this.handleMouseUp);
  this.handleDomSelect();
  this.resSetXY();}

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 元素位置信息

Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。返回值是一个 DOMRect 对象，返回的结果是包含完整元素的最小矩形，并且拥有 left, top, right, bottom, x, y, width, 和 height 这几个以像素为单位的只读属性用于描述整个边框。

该部分逻辑如下，比较简单

collide(rect1: any, rect2: any): boolean {const maxX: number = Math.max(rect1.x + rect1.width, rect2.x + rect2.width);
  const maxY: number = Math.max(rect1.y + rect1.height, rect2.y + rect2.height);
  const minX: number = Math.min(rect1.x, rect2.x);
  const minY: number = Math.min(rect1.y, rect2.y);
  if (maxX - minX <= rect1.width + rect2.width && maxY - minY <= rect1.height + rect2.height) {return true;} else {return false;}
}

难点已经攻破，遍历 checkbox 集合，每个 checkbox 都执行上面的矩形相交判断，并进行相应的勾选处理，此处不再多累述

<template>
  <div class="box" @mousedown="handleMouseDown">
    <div class="mask" v-show="is_show_mask" :style="'width:'+mask_width+'left:'+mask_left+'height:'+mask_height+'top:'+mask_top">
    </div>
    <el-checkbox-group v-model="select_list">
      <el-checkbox v-for="(item,index) in data_list" :label="item.city_id" :key="index">
        <p @click.stop.prevent> {{item.city_name}}</p>
      </el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script lang="ts">
/* eslint-disable @typescript-eslint/no-explicit-any */
import {Vue, Component} from 'vue-property-decorator';

interface City {
  city_id: number;
  city_name: string;
}

@Component({})
export default class Debug extends Vue {
  data_list: Array<City> = [{ city_id: 35, city_name: '香港特別行政區'},
    {city_id: 34, city_name: '北京市'},
    {city_id: 33, city_name: '江苏省'},
    {city_id: 32, city_name: '吉林省'},
    {city_id: 31, city_name: '内蒙古自治区'},
  ];

  select_list: Array<number> = [];

  is_show_mask = false;

  box_screen_left = 0;

  box_screen_top = 0;

  start_x = 0;

  start_y = 0;

  end_x = 0;

  end_y = 0;

  get mask_width() {return `${Math.abs(this.end_x - this.start_x)}px;`;
  }

  get mask_height() {return `${Math.abs(this.end_y - this.start_y)}px;`;
  }

  get mask_left() {return `${Math.min(this.start_x, this.end_x) - this.box_screen_left}px;`;
  }

  get mask_top() {return `${Math.min(this.start_y, this.end_y) - this.box_screen_top}px;`;
  }

  mounted() {const dom_box: any = document.querySelector('.box');
    this.box_screen_left = dom_box.getBoundingClientRect().left;
    this.box_screen_top = dom_box.getBoundingClientRect().top;}

  /* 方法 */
  handleMouseDown(event: any) {if (event.target.tagName === 'SPAN') return false;

    this.is_show_mask = true;
    this.start_x = event.clientX;
    this.start_y = event.clientY;
    this.end_x = event.clientX;
    this.end_y = event.clientY;

    document.body.addEventListener('mousemove', this.handleMouseMove);
    document.body.addEventListener('mouseup', this.handleMouseUp);
  }

  handleMouseMove(event: MouseEvent) {
    this.end_x = event.clientX;
    this.end_y = event.clientY;
  }

  handleMouseUp() {document.body.removeEventListener('mousemove', this.handleMouseMove);
    document.body.removeEventListener('mouseup', this.handleMouseUp);
    this.is_show_mask = false;
    this.handleDomSelect();
    this.resSetXY();}

  handleDomSelect() {const dom_mask: any = window.document.querySelector('.mask');
    const rect_select = dom_mask.getClientRects()[0];

    const add_list: Array<number> = [];
    const del_list: Array<number> = [];
    document.querySelectorAll('.el-checkbox-group .el-checkbox').forEach((node, index) => {const rects = node.getClientRects()[0];
      if (this.collide(rects, rect_select) === true) {if (this.select_list.includes(this.data_list[index].city_id)) {del_list.push(this.data_list[index].city_id);
        } else {add_list.push(this.data_list[index].city_id);
        }
      }
    });
    this.select_list = this.select_list.concat(add_list).filter((item: number) => !del_list.includes(item));
  }

  // eslint-disable-next-line class-methods-use-this
  collide(rect1: any, rect2: any): boolean {const maxX: number = Math.max(rect1.x + rect1.width, rect2.x + rect2.width);
    const maxY: number = Math.max(rect1.y + rect1.height, rect2.y + rect2.height);
    const minX: number = Math.min(rect1.x, rect2.x);
    const minY: number = Math.min(rect1.y, rect2.y);
    if (maxX - minX <= rect1.width + rect2.width && maxY - minY <= rect1.height + rect2.height) {return true;} else {return false;}
  }

  resSetXY() {
    this.start_x = 0;
    this.start_y = 0;
    this.end_x = 0;
    this.end_y = 0;
  }
}
</script>

<style lang="scss" scoped>
.box {
  width: 800px;
  margin: 20px auto;
  position: relative;
  overflow: hidden;
  user-select: none;
  .mask {
    position: absolute;
    background: #409eff;
    opacity: 0.4;
  }
  .el-checkbox-group {
    overflow: auto;
    .el-checkbox {
      width: 137px;
      margin: 0 20px 10px 0;
      float: left;
      ::v-deep .el-checkbox__input {
        padding-top: 3px;
        vertical-align: top;
      }
      p {
        width: 110px;
        white-space: pre-wrap;
      }
    }
  }
}
</style>

原生JS-实现框选功能Vue

效果

HTML 和 CSS 布局

JS 实现框选

完整代码

END