最近项目涉及到一个支持批量操作的小需求，交互上需要使用框选来触发。在查阅了一些资料后发现，网上的方案基本都是基于绝对定位布局的，此方案如果是针对全局（在body上）的框选，还是可用的。但是现实需求里几乎都是针对某个区域的框选。如果用绝对定位实现就比较繁琐了，需要调整定位原点。下面介绍一种基于Fixed定位的框选实现。

需求描述

• 按住鼠标左键不放，移动鼠标出现选择框
• 在鼠标移动的过程中，在框选范围内的元素高亮
• 松开鼠标左键，弹出编辑框，批量操作所有被框选的元素

实现

事件绑定

首先梳理一下需要用到的事件。

按住鼠标左键，因为并没有原生的鼠标左键按下事件，所以使用mousedown事件配合setTimeout模拟实现。mousedown事件绑定在当前区域上。 使用一个标志变量mouseOn来代表是否开始绘制

handleMouseDown(e) {
    
 // 判断是否为鼠标左键被按下
 if (e.buttons !== 1 || e.which !== 1) return;
    
 this.settimeId = window.setTimeout(() =>
 {
    
  this.mouseOn = true;
    
  // 设置选框的初始位置
  this.startX = e.clientX;
    
  this.startY = e.clientY;

 }
    , 300);

}
,
handleMouseUp(e) {
    
 //在mouseup的时候清除计时器，如果按住的时间不足300毫秒
 //则mouseOn为false
 this.settimeId &
    &
     window.clearTimeout(this.settimeId)
 if (!this.mouseOn) return;

}
    

这里有一个小的注意点，就是clearTimeout一定要写成 window.clearTimeout ，否则在vue里会报错timeout.close is not a function，具体的原因尚未找到，有大佬了解望告知。

鼠标移动，使用mousemove事件。 鼠标抬起，使用mouseup事件，注意抬起事件需要 绑定在document上 。因为用户的框选操作不会局限在当前区域，在任意位置松开鼠标都应能够结束框选的绘制。

选框绘制

在明确了事件之后，就只需要在几个事件中填充具体的绘制和判断逻辑了。先来看绘制的逻辑。在mousedown事件中，设置选框的初始位置，也就是鼠标按下的位置。这里我们提前写好一个div，用来代表选框。

div class="promotion-range__select" ref="select">
    /div>

.promotion-range__select {
    
 background: #598fe6;
    
 position: fixed;
    
 width: 0;
    
 height: 0;
    
 display: none;
    
 top: 0;
    
 left: 0;
    
 opacity:.6;
    
 pointer-events: none;

}
    

按下后显示这个div并且设置初始定位即可

this.$refs.select.style.cssText = `display:block;

                  left:${
this.startX}
    px;

                  top:${
this.startY}
    px
                  width:0;
    
                  height:0;
    `;

有了初始位置，在mousemove事件中，设置选框的宽高和定位。

handleMouseMove(e) {
    
 if (!this.mouseOn) return;
    
 const $select = this.$refs.select;
    
 const _w = e.clientX - this.startX;
    
 const _h = e.clientY - this.startY;
    
 //框选有可能是往左框选，此时框选矩形的左上角就变成
 //鼠标移动的位置了，所以需要判断。同理宽高要取绝对值
 this.top = _h >
     0 ? this.startY : e.clientY;
    
 this.left = _w >
     0 ? this.startX : e.clientX;
    
 this.width = Math.abs(_w);
    
 this.height = Math.abs(_h);

 $select.style.left = `${
this.left}
    px`;

 $select.style.top = `${
this.top}
    px`;

 $select.style.width = `${
this.width}
    px`;

 $select.style.height = `${
this.height}
    px`;

}
    ,

如果使用绝对定位，就要去校准坐标原点了，在布局中嵌套多个relative定位容器的情况下，就非常繁琐了。使用fixed定位就不需要考虑相对于哪个容器的问题了。

判断被框选的内容

//获取目标元素
const selList = document.getElementsByClassName(
 "promotion-range__item-inner"
);

const {
 bottom, left, right, top }
     = $select.getBoundingClientRect();
    
for (let i = 0;
     i  selList.length;
 i++) {
    
 const rect = selList[i].getBoundingClientRect();
    
 const isIntersect = !(
  rect.top >
     bottom ||
  rect.bottom  top ||
  rect.right  left ||
  rect.left >
     right
 );
    
 selList[i].classList[isIntersect ? "add" : "remove"]("is-editing");

}
    

判断使用了getBoundingClientRect，定义引用自MDN

返回值是一个 DOMRect 对象，这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合, 即：是与该元素相关的CSS 边框集合 。

DOMRect 对象包含了一组用于描述边框的只读属性——left、top、right和bottom，单位为像素。除了 width 和 height 外的属性都是相对于 视口的左上角 位置而言的。

从定义中可以看到getBoundingClientRect中获取的left、top、right和bottom是相对于视口左上角的，这和fixed定位的定义是一致的。因此，我们仅需要对比选框和被框选元素的四个定位值即可。

rect.top > bottom 被框选元素位于选框上方

rect.bottom top 被框选元素位于选框下方

rect.right left 被框选元素位于选框左侧

rect.left > right 被框选元素位于选框右侧

排除这四种情况以外就是选框和被框选元素存在交集，给这些div加上class，因为移动过程中也需要让用户感知到被框选的元素，所以上述方法在mousemove中也要执行。

在mouseup中判断被框选元素后，将选框置为display：none。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！