Fixed定位的框选功能的代码实例

  • 更新时间:2020-07-24 13:55:57
  • 编辑:连俊贤
我们帮大家精选了相关的编程文章,网友尹恬雅根据主题投稿了本篇教程内容,涉及到Fixed、定位、基于Fixed定位的框选功能的实现代码相关内容,已被255网友关注,涉猎到的知识点内容可以在下方电子书获得。

参考资料

正文内容

基于Fixed定位的框选功能的实现代码

最近项目涉及到一个支持批量操作的小需求,交互上需要使用框选来触发。在查阅了一些资料后发现,网上的方案基本都是基于绝对定位布局的,此方案如果是针对全局(在body上)的框选,还是可用的。但是现实需求里几乎都是针对某个区域的框选。如果用绝对定位实现就比较繁琐了,需要调整定位原点。下面介绍一种基于Fixed定位的框选实现。

需求描述

基于Fixed定位的框选功能的实现代码

  • 按住鼠标左键不放,移动鼠标出现选择框
  • 在鼠标移动的过程中,在框选范围内的元素高亮
  • 松开鼠标左键,弹出编辑框,批量操作所有被框选的元素

实现

事件绑定

首先梳理一下需要用到的事件。

按住鼠标左键,因为并没有原生的鼠标左键按下事件,所以使用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,用来代表选框。

<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地址

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。

相关教程

  • jquery将鼠标焦点定位到文本框最后的实例代码

    本文主要分享了将鼠标焦点定位到文本框最后的实例代码。具有很好的参考价值,下面跟着小编一起来看下吧

    发布时间:2020-01-16

  • Selenium定位元素操作实例详解

    这篇文章主要介绍了Selenium定位元素操作,结合实例形式总结分析了Selenium通过ID、name、XPath、标签名称、类名等进行元素定位操作的相关实现技巧,需要的朋友可以参考下

    发布时间:2019-09-10

  • 理解jQuery返回定位插件

    本篇文章主要介绍了jQuery返回定位插件的相关知识,具有很好的参考价值。下面跟着小编一起来看下吧

    发布时间:2020-02-22

  • js实现PC端根据IP定位当前城市地理位置方法步骤

    本文主要分享了js实现PC端根据IP定位当前城市地理位置的方法,具有很好的参考价值,下面跟着小编一起来看下吧

    发布时间:2020-01-22

  • Java操作word文档替换文字并指定位置插入图片方法

    在本篇文章里我们给大家总结了Java操作word文档替换文字并指定位置插入图片方法以及相关实例代码,以后需要的朋友们学习下。

    发布时间:2018-12-01

  • Web前端开发精品课 JavaScript基础教程

    Web前端开发精品课 JavaScript基础教程

    《JavaScript基础教程》 共分为2大部分,第1部分是JavaScript基础知识,主要学习JavaScript基础概念如变量、运算符、表达式等。第二部分是JavaScript进阶知识,主要学习DOM、事件操作以及各种开发技

    大小:9.7 MB前端电子书

  • 大型JavaScript应用最佳实践指南

    大型JavaScript应用最佳实践指南

    大小:35 MBJavaScript电子书

  • 你不知道的JavaScript(中卷)

    你不知道的JavaScript(中卷)

    JavaScript这门语言简单易用,很容易上手,但其语言机制复杂微妙,即使是经验丰富的JavaScript开发人员,如果没有认真学习的话也无法真正理解。

    大小:7.8 MBJS电子书

  • 你不知道的JavaScript(上卷)

    你不知道的JavaScript(上卷)

    很多人对JavaScript这门语言的印象都是简单易学,很容易上手。虽然JavaScript语言本身有很多复杂的概念,但语言的使用者不必深入理解这些概念就可以编写出功能全面的应用。

    大小:8.4 MBJS电子书

  • JavaScript语言精粹

    JavaScript语言精粹

    JavaScript曾是全世界非常容易误解的言语,由于它肩负过多的特点,包含槽糕的互动和不成功的设计方案,但伴随着Ajax的来临,JavaScript从极受误会的程序语言演化为十分时髦的言语,这除开好

    大小:9.9 MBJavaScript电子书

用户留言