基於Fixed定位的框選功能

最近項目涉及到一個支持批量操做的小需求，交互上須要使用框選來觸發。在查閱了一些資料後發現，網上的方案基本都是基於絕對定位佈局的，此方案若是是針對全局（在body上）的框選，仍是可用的。可是現實需求裏幾乎都是針對某個區域的框選。若是用絕對定位實現就比較繁瑣了，須要調整定位原點。下面介紹一種基於Fixed定位的框選實現。

需求描述

1. 按住鼠標左鍵不放，移動鼠標出現選擇框
2. 在鼠標移動的過程當中，在框選範圍內的元素高亮
3. 鬆開鼠標左鍵，彈出編輯框，批量操做全部被框選的元素

實現

事件綁定

首先梳理一下須要用到的事件。
按住鼠標左鍵，由於並無原生的鼠標左鍵按下事件，因此使用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;
}
複製代碼

鼠標移動，使用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。

功能demo地址

github.com/juenanfeng/…

參考連接

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