大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
利用Fixed定位怎么实现框选功能?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
创新互联公司是专业的阿城网站建设公司,阿城接单;提供网站制作、网站设计,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行阿城网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!
实现
事件绑定
首先梳理一下需要用到的事件。
按住鼠标左键,因为并没有原生的鼠标左键按下事件,所以使用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; }
这里有一个小的注意点,就是clearTimeout一定要写成 window.clearTimeout,否则在vue里会报错timeout.close is not a function,具体的原因尚未找到,有大佬了解望告知。
鼠标移动,使用mousemove事件。 鼠标抬起,使用mouseup事件,注意抬起事件需要 绑定在document上。因为用户的框选操作不会局限在当前区域,在任意位置松开鼠标都应能够结束框选的绘制。
选框绘制
在明确了事件之后,就只需要在几个事件中填充具体的绘制和判断逻辑了。先来看绘制的逻辑。在mousedown事件中,设置选框的初始位置,也就是鼠标按下的位置。这里我们提前写好一个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。
看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注创新互联行业资讯频道,感谢您对创新互联的支持。