基於Fixed定位的框選功能
最近專案涉及到一個支援批量操作的小需求，互動上需要使用框選來觸發。在查閱了一些資料後發現，網上的方案基本都是基於絕對定位佈局的，此方案如果是針對全域性（在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。