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


Posted in Javascript onMay 13, 2019

最近项目涉及到一个支持批量操作的小需求,交互上需要使用框选来触发。在查阅了一些资料后发现,网上的方案基本都是基于绝对定位布局的,此方案如果是针对全局(在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。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript入门教程(12) js对象化编程
Jan 31 Javascript
JavaScript中的闭包(Closure)详细介绍
Dec 30 Javascript
JavaScript中用字面量创建对象介绍
Dec 31 Javascript
jQuery修改class属性和CSS样式整理
Jan 30 Javascript
javascript实现点击商品列表checkbox实时统计金额的方法
May 15 Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 jQuery
基于AngularJS实现表单验证功能
Jul 28 Javascript
详解koa2学习中使用 async 、await、promise解决异步的问题
Nov 13 Javascript
微信小程序云开发 搭建一个管理小程序
May 17 Javascript
Angular之jwt令牌身份验证的实现
Feb 14 Javascript
javascript执行上下文、变量对象实例分析
Apr 25 Javascript
element-ui封装一个Table模板组件的示例
Jan 04 Javascript
JQuery事件委托原理与用法实例分析
May 13 #jQuery
使用原生js编写一个简单的框选功能方法
May 13 #Javascript
Node.js实现一个HTTP服务器的方法示例
May 13 #Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 #jQuery
Vue表单绑定的实例代码(单选按钮,选择框(单选时,多选时,用 v-for 渲染的动态选项)
May 13 #Javascript
JavaScript封闭函数及常用内置对象示例
May 13 #Javascript
vue 表单之通过v-model绑定单选按钮radio
May 13 #Javascript
You might like
收音机频率指针指示不准确和灵敏度低问题
2021/03/02 无线电
深入解析php模板技术原理【一】
2008/01/10 PHP
解析coreseek for sphinx的使用
2013/06/21 PHP
PHP替换Word中变量并导出PDF图片的实现方法
2020/11/26 PHP
常用的javascript function代码
2008/05/23 Javascript
JavaScript 类似flash效果的立体图片浏览器
2010/02/08 Javascript
转义字符(\)对JavaScript中JSON.parse的影响概述
2013/07/17 Javascript
javascript实现客户端兼容各浏览器创建csv并下载的方法
2015/03/23 Javascript
在AngularJS中使用AJAX的方法
2015/06/17 Javascript
JavaScript调用浏览器打印功能实例分析
2015/07/17 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
2016/06/28 Javascript
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
2016/08/01 Javascript
js实现砖头在页面拖拉效果
2020/11/20 Javascript
AngularJS中directive指令使用之事件绑定与指令交互用法示例
2016/11/22 Javascript
jquery ajaxfileupload异步上传插件使用详解
2017/02/08 Javascript
vue之nextTick全面解析
2017/05/17 Javascript
js学习总结之dom2级事件基础知识详解
2017/07/27 Javascript
jQuery实现锚点向下平滑滚动特效示例
2017/08/29 jQuery
基于webpack 实用配置方法总结
2017/09/28 Javascript
10行原生JS实现文字无缝滚动(超简单)
2018/01/02 Javascript
JS简单数组排序操作示例【sort方法】
2019/05/17 Javascript
微信小程序如何访问公众号文章
2019/07/08 Javascript
JS轮播图的实现方法2
2020/08/25 Javascript
[45:38]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第一局
2016/03/02 DOTA
Python获取任意xml节点值的方法
2015/05/05 Python
Python构造自定义方法来美化字典结构输出的示例
2016/06/16 Python
Python操作Excel插入删除行的方法
2018/12/10 Python
python获取指定日期范围内的每一天,每个月,每季度的方法
2019/08/08 Python
用Python开发app后端有优势吗
2020/06/29 Python
python SOCKET编程基础入门
2021/02/27 Python
社区十八大感言
2014/01/19 职场文书
读群众路线的心得体会
2014/09/03 职场文书
小学生九一八纪念日83周年演讲稿500字
2014/09/17 职场文书
解除劳动合同证明书模板
2014/11/20 职场文书
校本研修个人总结
2015/02/28 职场文书
JavaScript选择器函数querySelector和querySelectorAll
2021/11/27 Javascript