本篇文章給大家分享的是有關使用JavaScript怎么實現(xiàn)一個框選功能，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
十多年的秀嶼網(wǎng)站建設經(jīng)驗，針對設計、前端、開發(fā)、售后、文案、推廣等六對一服務，響應快，48小時及時工作處理。全網(wǎng)整合營銷推廣的優(yōu)勢是能夠根據(jù)用戶設備顯示端的尺寸不同，自動調(diào)整秀嶼建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設計，從而大程度地提升瀏覽體驗。創(chuàng)新互聯(lián)從事“秀嶼網(wǎng)站設計”,“秀嶼網(wǎng)站推廣”以來，每個客戶項目都認真落實執(zhí)行。
添加鼠標事件監(jiān)聽
由于js自身并沒有帶有鼠標點擊按住不放這樣子的事件，這里我們不僅需要檢測鼠標左鍵點擊按下，還要加一個定時器來檢測鼠標是否按住不放了。
添加框選可視化元素
框選可視化元素示意圖
我們有了事件監(jiān)聽還不夠，為了更好的交互效果，我們需要一個隨時跟隨著鼠標移動的框選框元素，用于讓用戶隨時感知框選范圍。
添加鼠標松開事件監(jiān)聽
元素是否被選中示意圖
我們沒有在鼠標移動的時候去實時統(tǒng)計被框選到的DOM元素，如果需要實時統(tǒng)計或者實時修改被選擇的DOM元素的樣式，以便更準確的讓用戶感知到被框選的內(nèi)容的話，可以選擇在mousemove事件里邊去實現(xiàn)以下代碼：
這里判斷一個元素是否被選中采用的判斷條件是：
該DOM元素的最右邊（fileDiv[i].offsetLeft + fileDiv[i].offsetWidth）是否要比選框元素最左邊（selDiv.offsetLeft）的位置要小；
該DOM元素的最下邊（fileDiv[i].offsetTop + fileDiv[i].offsetHeight）是否要比選框元素的最上邊（selDiv.offsetTop）的位置要大；
該DOM元素的最左邊（fileDiv[i].offsetLeft）是否要比選框元素的最后邊(selDiv.offsetLeft + selDiv.offsetWidth)的位置數(shù)值要小；
該DOM元素的最上邊（fileDiv[i].offsetTop）是否要比選框元素的最下邊（selDiv.offsetTop + selDiv.offsetHeight）的位置數(shù)值要?。?/p>
滿足了以上四個條件，即可判別為該DOM元素被選中了。
實際應用
上邊的例子，舉得有些過于簡單了。實際的開發(fā)當中，框選的范圍往往不可能是整個document.body，而是某一個具體的有特定寬度跟高度限制的元素。這個時候，就還需要考慮這個框選容器元素造成的定位偏差，以及容器內(nèi)元素過多，出現(xiàn)滾動條的情況了。
乍一看，上邊的情況需要考慮的因素多了不少，比較容易亂。我這里采用的方法是修改坐標系的方式來實現(xiàn)上邊描述的功能。上文我們已經(jīng)實現(xiàn)了在document.body整個頁面左上角頂點作為坐標原點來實現(xiàn)框選功能，這時候我們需要修改坐標原點為框選容器的左上角頂點作為坐標原點即可。
換言之，就是修改mousedown跟mousemove事件時，初始位置由原來的e.clientX跟e.clientY修改為e.clientX - selectContaienr.offsetLeft + selectContainer.scrollLeft跟e.clientY - selectContainer.offsetTop + selectContainer.scrollTop。
坐標更改shi'yi'tu
重慶分公司
重慶分公司
