鼠标拖拽建立选区，选中元素

最新推荐文章于 2023-11-21 14:21:39 发布

萤火之森-Thezero

最新推荐文章于 2023-11-21 14:21:39 发布

阅读量859

点赞数 2

分类专栏：前端文章标签： vue typescript

本文链接：https://blog.csdn.net/qq_42241862/article/details/118736205

版权

本文介绍如何在Vue项目中使用TypeScript实现鼠标拖拽选区，以批量选中元素。详细过程包括效果展示、建立选区组件的步骤，如确定选区位置、筛选选中元素、判断元素是否在选区内，以及完整代码的分享。

摘要由CSDN通过智能技术生成

个人博客网站欢迎交流：萤火之森：https://blog.xkongkeji.com

近段时间做一个编辑器，就需要一个鼠标拖拽选区的功能，方便批量选中元素，进行相应操作，所有就有了这篇文章。

效果展示

建立选区组件

1、要想选中元素，肯定要先建立选区

根据两个坐标点确定选区位置，并绘制出选区
根据两个坐标删除选区的宽与高

let size = computed(() => {
      let width =
        props.endPoint.x === 0
          ? 0
          : Math.abs(props.startPoint.x - props.endPoint.x);
      let height =
        props.endPoint.y === 0
          ? 0
          : Math.abs(props.startPoint.y - props.endPoint.y);
      return {
        width,
        height,
      };

确定起始坐标点
- 不管从何处点击都需要找到两个坐标点所绘制的矩形的左上角的坐标点。
- 左上角的坐标点，很明显是所有坐标的最小值，也就是X,Y取最小的值的点（如下）
- 还需要考虑终点还没有产生时的情况，也就是排除终点为初始值也就是0的情况

 let Point = computed(() => {
      let x =
        props.endPoint.x === 0
          ? props.startPoint.x
          : Math.min(props.startPoint.x, props.endPoint.x);
      let y =
        props.endPoint.y === 0
          ? props.startPoint.y
          : Math.min(props.startPoint.y, props.endPoint.y);
      return {
        x,
        y,
      };
    });zaige

这样就可绘制出一个选区

2、根据选区，筛选出选中的元素

筛选选区的元素主要是根据nodeType选中出编辑区所有可选择的元素节点。
怎么才算可选元素，这就得看自己需要，我在元素节点上标注了canChecked，通过这个属性排除非可选元素

 * 获取该元素下可以被选中的元素集合
 * @param parentElement 父元素
 * @param keyCode 可选元素标识
 * @returns
 */
function getChildrens(parentElement: HTMLElement, keyCode: string) {