如何实现基于Fixed定位的框选功能？

本文共计1423个文字，预计阅读时间需要6分钟。

最近项目涉及到一个支持批量操作的小需求，交互上需要使用框架来提升开发效率。查阅资料后发现，网上的方案基本都基于绝对定位布局，而本项目若针对全局（在body上）则需采用不同方案。

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

需求描述

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

实现

事件绑定

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

按住鼠标左键，因为并没有原生的鼠标左键按下事件，所以使用mousedown事件配合setTimeout模拟实现。mousedown事件绑定在当前区域上。