基于Fixed定位的框選功能的實現代碼

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 ? 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`;
},

//獲取目標元素
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");
}