利用Fixed定位怎么實(shí)現(xiàn)框選功能

利用Fixed定位怎么實(shí)現(xiàn)框選功能？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

創(chuàng)新互聯(lián)公司是專業(yè)的阿城網(wǎng)站建設(shè)公司，阿城接單;提供網(wǎng)站制作、網(wǎng)站設(shè)計(jì),網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行阿城網(wǎng)站開發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!

實(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為false
 this.settimeId && window.clearTimeout(this.settimeId)
 if (!this.mouseOn) return;
}

這里有一個(gè)小的注意點(diǎn)，就是clearTimeout一定要寫成 window.clearTimeout，否則在vue里會(huì)報(bào)錯(cuò)timeout.close is not a function，具體的原因尚未找到，有大佬了解望告知。

鼠標(biāo)移動(dòng)，使用mousemove事件。鼠標(biāo)抬起，使用mouseup事件，注意抬起事件需要 綁定在document上。因?yàn)橛脩舻目蜻x操作不會(huì)局限在當(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;
}

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

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

有了初始位置，在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)移動(dòng)的位置了，所以需要判斷。同理寬高要取絕對(duì)值
 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`;
},

如果使用絕對(duì)定位，就要去校準(zhǔn)坐標(biāo)原點(diǎn)了，在布局中嵌套多個(gè)relative定位容器的情況下，就非常繁瑣了。使用fixed定位就不需要考慮相對(duì)于哪個(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");
}

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

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

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

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

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

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

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

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

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

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

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)的支持。

當(dāng)前文章：利用Fixed定位怎么實(shí)現(xiàn)框選功能
當(dāng)前鏈接：http://bm7419.com/article22/jdopjc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗(yàn)、響應(yīng)式網(wǎng)站、網(wǎng)站導(dǎo)航、小程序開發(fā)、外貿(mào)網(wǎng)站建設(shè)、服務(wù)器托管

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容