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;
}

<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;
}

this.$refs.select.style.cssText = `display:block;
                  left:${this.startX}px;
                  top:${this.startY}px
                  width:0;
                  height:0;`;

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 "color: #ff0000">判断被框选的内容



//获取目标元素
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。
功能demo地址


参考链接
https://www.jb51.net/article/161132.htm

https://developer.mozilla.org/zh-CN/docs/Web/CSS/position

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。