I recorded some time ago about a package of components vue bar. Technology need to accumulate, before I have time I write pretty good out of the components are open source. Vue component package and to try and react in two ways. Today wrote a simple mouse marquee div effect of selected package of it.
div marquee achieve
div marquee effect, in fact, there is no good way is to get the mouse events, depending on the position of the mouse, creating a dynamic follow the mouse div. [Note: This method relies on positioning mode position, the general position is for global mouse events, it is best to position the mouse marquee of the parent element div position is to locate the root element. Otherwise, the mouse marquee marquee area and the area is very difficult to be consistent. ]
In fact, it is summed up in two steps:
Press and hold the left mouse button, move the mouse appears rectangular box;
Release the mouse button, DOM elements based on the statistical rectangular marquee box emerging upper range;
Follow the mouse create a div, the code is as follows:
// 创建选框节点
this.selectBoxDashed = document.createElement('div') this.selectBoxDashed.className = 'haorooms-select-box' document.body.appendChild(this.selectBoxDashed) this.scrollX = document.documentElement.scrollLeft || document.body.scrollLeft this.scrollY = document.documentElement.scrollTop || document.body.scrollTop // 设置选框的初始位置 this.startX = e.x + this.scrollX || e.clientX + this.scrollX // e是鼠标事件的event this.startY = e.y + this.scrollY || e.clientY + this.scrollY // e是鼠标事件的event this.selectBoxDashed.style.cssText = `left:${this.startX}px;top:${this.startY}px`Mouse move, get a list of the selected div, add a temporary class
this.selectBoxDashed.style.display = 'block' // 上面创建的鼠标跟随div出现 // 根据鼠标移动，设置选框的位置、宽高 this.initx = e.x + this.scrollX || e.clientX + this.scrollX //鼠标移动的初始位置+滚动轴的位置 this.inity = e.y + this.scrollY || e.clientY + this.scrollY // 暂存选框的位置及宽高，用于将 select-item 选中 this.left = Math.min(this.initx, this.startX) this.top = Math.min(this.inity, this.startY) this.width = Math.abs(this.initx - this.startX) this.height = Math.abs(this.inity - this.startY) this.selectBoxDashed.style.left = `${this.left}px` this.selectBoxDashed.style.top = `${this.top}px` this.selectBoxDashed.style.width = `${this.width}px` this.selectBoxDashed.style.height = `${this.height}px` let fileDivs = document.getElementsByClassName('list') // 获取要选中的div列表 for (let i = 0; i < fileDivs.length; i++) { let itemX_pos = fileDivs[i].offsetWidth + fileDivs[i].offsetLeft let itemY_pos = fileDivs[i].offsetHeight + fileDivs[i].offsetTop let condition1 = itemX_pos