谷歌浏览器插件 录制元素拖动事件

背景

最近在开发谷歌浏览器录制插件的过程中，发现无法监听 vue2 项目的元素拖动事件，拖拽组件使用的是 vue2 的vue-smooth-dnd 包。

正常未使用第三方拖拽库的元素已经可以监听到其拖拽事件，使用了上述第三方库的时候，元素拖拽事件无法监听。

解决思路

一番研究后发现vue-smooth-dnd 使用鼠标事件模拟拖拽，而非 HTML5 原生拖拽事件。因此，需监听鼠标事件或库的自定义事件。

vue-smooth-dnd 库会触发以下关键事件：

• @drag-start: 拖拽开始时触发
• @drag-end: 拖拽结束时触发
• @drop: 元素放置时触发

在尝试监听 drag 等事件发现无效后，无法捕获自定义事件，采取监听 鼠标事件来处理拖拽行为。

// content-script.js
let isDragging = false;
let startX, startY;

document.addEventListener('mousedown', (e) => {
  if (e.target.closest('.smooth-dnd-container')) { // 检查目标元素
    isDragging = true;
    [startX, startY] = [e.clientX, e.clientY];
  }
});

document.addEventListener('mousemove', (e) => {
  if (isDragging) {
    const dx = e.clientX - startX;
    const dy = e.clientY - startY;
    // 如果移动超过阈值，判定为拖拽中
    if (Math.abs(dx) > 5 || Math.abs(dy) > 5) {
      console.log('拖拽中...', { dx, dy });
    }
  }
});

document.addEventListener('mouseup', () => {
  if (isDragging) {
    console.log('拖拽结束');
    isDragging = false;
  }
});

注意事项

• 性能优化 ：避免在 mousemove 中执行高频率操作，可添加防抖。
• 选择器适配 ：根据实际项目调整 .smooth-dnd-container 选择器。此处需要注意，不同拖拽库对应的 css 选择器可能不同，需要注意，处理对应兼容。

通过以上方法，插件应能正确录制 vue-smooth-dnd 的拖拽行为。