如何正确使用Chrome DevTools Protocol相关接口触发网页拖拽行为

报错原因定位 #

你遇到的is not a function错误90%以上是对接口属性的理解偏差导致：

• Input.dragIntercepted是被动接收的事件，不是可以主动调用的方法，开启拖拽拦截后页面触发原生拖拽动作时，CDP会主动推送该事件，直接调用就会报错
• 其次要确认Chrome/Chromium内核版本≥89，低于该版本这两个接口未正式上线，也会识别失败
• 如果你用的是Puppeteer、Playwright等上层封装库，不要直接调用封装的Input实例方法，这类偏冷门接口一般需要通过原生CDP通道调用

接口使用前置要求 #

• Chrome/Chromium版本 ≥ 89，开启远程调试端口
• 主动触发拖拽仅需要使用Input.dispatchDragEvent，Input.dragIntercepted仅用于监听拦截页面原生的拖拽行为

完整拖拽触发流程 #

主动触发拖拽需要按照标准拖拽事件流，按顺序调用Input.dispatchDragEvent传入不同的事件类型：

1. 开启拖拽拦截（可选，仅需监听页面原生拖拽时执行）：调用Input.setInterceptDrags，参数为{enabled: true}，之后即可监听Input.dragIntercepted事件拿到页面原生拖拽的会话数据
2. 触发dragStart：传入拖拽起始点坐标、拖拽携带的DataTransfer数据
3. 触发drag：拖拽移动过程事件，按需多次调用更新坐标
4. 触发dragEnter：拖拽进入目标元素区域，传入目标点坐标
5. 触发dragOver：拖拽悬停在目标区域，按需多次调用
6. 触发drop：在目标点释放拖拽
7. 触发dragEnd：结束整个拖拽流程

Puppeteer调用示例 #

const browser = await puppeteer.launch({ headless: false });
const page = await browser.newPage();
await page.goto('你的目标页面地址');

// 可选：开启拖拽拦截，监听页面原生拖拽事件
await page.client().send('Input.setInterceptDrags', { enabled: true });
page.client().on('Input.dragIntercepted', (dragEvent) => {
  // 处理拦截到的原生拖拽数据
  console.log(dragEvent.data, dragEvent.x, dragEvent.y);
});

// 主动触发拖拽：从坐标(120, 150)拖拽到(400, 450)
const dragData = {
  items: [{ mimeType: 'text/plain', data: '自定义拖拽内容' }],
  dragOperations: 'copy'
};

// 1. 开始拖拽
await page.client().send('Input.dispatchDragEvent', {
  type: 'dragStart',
  x: 120,
  y: 150,
  data: dragData,
  modifiers: 0
});
// 2. 拖拽移动
await page.client().send('Input.dispatchDragEvent', {
  type: 'drag',
  x: 400,
  y: 450,
  data: dragData
});
// 3. 进入目标区域
await page.client().send('Input.dispatchDragEvent', {
  type: 'dragEnter',
  x: 400,
  y: 450,
  data: dragData
});
// 4. 悬停目标区域
await page.client().send('Input.dispatchDragEvent', {
  type: 'dragOver',
  x: 400,
  y: 450,
  data: dragData
});
// 5. 释放拖拽
await page.client().send('Input.dispatchDragEvent', {
  type: 'drop',
  x: 400,
  y: 450,
  data: dragData
});
// 6. 结束拖拽
await page.client().send('Input.dispatchDragEvent', {
  type: 'dragEnd',
  x: 400,
  y: 450,
  data: dragData
});

内容的提问来源于stack exchange，提问作者kne1234