纯 JS 实现放大缩小拖拽功能(完整代码)

前言

最近团队需要做一个智能客服悬浮窗功能，需要支持拖动、放大缩小等功能，因为这个是全局插件，为了兼容性考虑全部使用原生 JS 实现，不引用任何第三方库或者插件。开发过程中遇到的一些问题及解决方法，在这里和大家分享交流一下。

注：下文出现的“采宝”二字，为这个功能的产品名。

先看效果

 

看这个效果，相信大部分开发都会觉得实现起来比较容易。在实际开发中，笔者总结了三个主要的坑点，及其解决方案。

三个坑点

• 拖拽采宝时会导致采宝放大缩小
• 采宝显示在屏幕边界时被遮挡显示不全
• 采宝放大和缩小后，位置发生变化

（一）拖拽时会导致采宝放大缩小

我们在操作采宝时，不管是鼠标拖动还是点击放大缩小，我们的事件都需要绑定在采宝头部的图标上，这样我们就需要在图标上同时绑定点击和拖拽事件。但是当我们直接添加 click 事件和 mousedown 事件的时候，我们发现在触发 mousedown 事件的时候，也会去触发 click 事件。这样就会出现在拖动采宝的时候，采宝会放大和缩小。

 

这个效果是我们不想看到的，所以我们就需要区分开采宝上的 click 事件和 mousedown 事件，想办法使两个事件的触发相互不影响。

所以我们在同一个 DIV 上同时绑定 mousedown 事件和 click 事件，然后通过控制台输出每个事件，查看过程中的每个事件的触发顺序。

?

1 2 3 4 5 6 7 8 9 10 11 12 13

const moveBox = document.querySelector('.move'); moveBox.onmousedown = function (evt) {  console.log('触发鼠标按下')  moveBox.onmousemove = function (evt) {  console.log('触发鼠标拖动')  } } function moveBoxClick(e) {  console.log('触发click') } moveBox.onmouseup = function () {  console.log('触发鼠标抬起') }

然后我们得到的结果是：

 

 

通过控制台的输出情况，我们就可以看到鼠标点击后的各个事件触发情况：首先执行的是 mousedown 事件，然后是 mousemove 事件，再然后是 mouseup 事件，最后是 click 事件。

知道了事件的触发顺序，我们就可以通过设置一个变量 isMove 来区分开鼠标的拖动事件和点击事件，每次鼠标按下的时候我们将 isMove 复原，鼠标移动的时候将 isMove 的状态改变。

因为每次触发 click 事件的时候也都会去先去触发 mousedown 事件，所以我们在 click 事件里增加一个判断，鼠标移动时，不触发 click 事件。这样就可以把 click 事件和 mousedown 事件区分开来，实现 mousedown 和 click 事件的隔离。

click 事件增加判断

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

function moveBoxClick(e) {  // 点击采宝  const target = document.querySelector(".move");  const smallImg = document.querySelector(".small-img");  const magnifyImg = document.querySelector(".magnify-img");  // 点击move盒子  if (!isMove) {  if (isBig) {