最近項(xiàng)目涉及到一個(gè)支持批量操作的小需求，交互上需要使用框選來觸發(fā)。在查閱了一些資料后發(fā)現(xiàn)，網(wǎng)上的方案基本都是基于絕對定位布局的，此方案如果是針對全局（在body上）的框選，還是可用的。但是現(xiàn)實(shí)需求里幾乎都是針對某個(gè)區(qū)域的框選。如果用絕對定位實(shí)現(xiàn)就比較繁瑣了，需要調(diào)整定位原點(diǎn)。下面介紹一種基于Fixed定位的框選實(shí)現(xiàn)。

需求描述

按住鼠標(biāo)左鍵不放，移動鼠標(biāo)出現(xiàn)選擇框

在鼠標(biāo)移動的過程中，在框選范圍內(nèi)的元素高亮

松開鼠標(biāo)左鍵，彈出編輯框，批量操作所有被框選的元素

實(shí)現(xiàn)

事件綁定

首先梳理一下需要用到的事件。
按住鼠標(biāo)左鍵，因?yàn)椴]有原生的鼠標(biāo)左鍵按下事件，所以使用mousedown事件配合setTimeout模擬實(shí)現(xiàn)。mousedown事件綁定在當(dāng)前區(qū)域上。 使用一個(gè)標(biāo)志變量mouseOn來代表是否開始繪制

handleMouseDown(e) {// 判斷是否為鼠標(biāo)左鍵被按下if (e.buttons !== 1 || e.which !== 1) return;this.settimeId = window.setTimeout(() => {this.mouseOn = true;// 設(shè)置選框的初始位置this.startX = e.clientX;this.startY = e.clientY;}, 300); }, handleMouseUp(e) {//在mouseup的時(shí)候清除計(jì)時(shí)器，如果按住的時(shí)間不足300毫秒//則mouseOn為falsethis.settimeId && window.clearTimeout(this.settimeId)if (!this.mouseOn) return; } 復(fù)制代碼

鼠標(biāo)移動，使用mousemove事件。 鼠標(biāo)抬起，使用mouseup事件，注意抬起事件需要綁定在document上。因?yàn)橛脩舻目蜻x操作不會局限在當(dāng)前區(qū)域，在任意位置松開鼠標(biāo)都應(yīng)能夠結(jié)束框選的繪制。

選框繪制

在明確了事件之后，就只需要在幾個(gè)事件中填充具體的繪制和判斷邏輯了。先來看繪制的邏輯。在mousedown事件中，設(shè)置選框的初始位置，也就是鼠標(biāo)按下的位置。這里我們提前寫好一個(gè)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; } 復(fù)制代碼

按下后顯示這個(gè)div并且設(shè)置初始定位即可

this.$refs.select.style.cssText = `display:block;left:${this.startX}px;top:${this.startY}pxwidth:0;height:0;`; 復(fù)制代碼

有了初始位置，在mousemove事件中，設(shè)置選框的寬高和定位。

handleMouseMove(e) {if (!this.mouseOn) return;const $select = this.$refs.select;const _w = e.clientX - this.startX;const _h = e.clientY - this.startY;//框選有可能是往左框選，此時(shí)框選矩形的左上角就變成//鼠標(biāo)移動的位置了，所以需要判斷。同理寬高要取絕對值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`; }, 復(fù)制代碼

如果使用絕對定位，就要去校準(zhǔn)坐標(biāo)原點(diǎn)了，在布局中嵌套多個(gè)relative定位容器的情況下，就非常繁瑣了。使用fixed定位就不需要考慮相對于哪個(gè)容器的問題了。

判斷被框選的內(nèi)容

//獲取目標(biāo)元素 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"); } 復(fù)制代碼

判斷使用了getBoundingClientRect，定義引用自MDN

返回值是一個(gè) DOMRect 對象，這個(gè)對象是由該元素的 getClientRects() 方法返回的一組矩形的集合, 即：是與該元素相關(guān)的CSS 邊框集合 。

DOMRect 對象包含了一組用于描述邊框的只讀屬性——left、top、right和bottom，單位為像素。除了 width 和 height 外的屬性都是相對于視口的左上角位置而言的。

從定義中可以看到getBoundingClientRect中獲取的left、top、right和bottom是相對于視口左上角的，這和fixed定位的定義是一致的。因此，我們僅需要對比選框和被框選元素的四個(gè)定位值即可。

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

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

rect.right < left 被框選元素位于選框左側(cè)

rect.left > right 被框選元素位于選框右側(cè)

排除這四種情況以外就是選框和被框選元素存在交集，給這些div加上class，因?yàn)橐苿舆^程中也需要讓用戶感知到被框選的元素，所以上述方法在mousemove中也要執(zhí)行。

在mouseup中判斷被框選元素后，將選框置為display：none。

功能demo地址

github.com/juenanfeng/…

參考鏈接

www.jianshu.com/p/5052c6fd2…
developer.mozilla.org/zh-CN/docs/…
developer.mozilla.org/zh-CN/docs/…

總結(jié)

以上是生活随笔為你收集整理的基于Fixed定位的框选功能的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。