拖拽元素

📖 节点概述

模拟真实鼠标拖拽操作，将一个网页元素从起始位置平滑拖动到另一个元素上，或者按照指定的像素偏移量进行移动。拖动过程包含缓动曲线和随机微动，模拟人类操作，来应对滑块验证码、可拖拽排序列表以及需要将元素放入特定区域的交互场景。

💡 使用场景：

• 滑块验证码：按像素偏移拖动滑块，准确定位到缺口位置。
• 可排序列表：将任务卡片拖拽到不同分组或调整顺序。
• 文件上传区域：将文件图标拖入网页的“上传”虚线框内。
• 进度条/调节杆：拖拽滑块调整音量、价格区间等。
• 模块化页面布局：移动仪表盘小部件到不同位置。

🎮 实战连线指南：如何正确使用它？

节点默认操作当前活动标签页，也可通过 Tab 指定其他标签页。源元素是必须提供的定位器。根据“定位方式”的不同，需要额外配置目标或偏移量。

场景案例：完成拼图滑块验证

1. 打开页面：导航到包含滑块验证码的页面。
2. 定位滑块：使用【智能定位元素】获取滑块按钮的定位器（如 .slider-btn），将其填入“源元素”。
3. 设置偏移模式：在“定位方式”下拉框中选择“指定像素偏移”。此时节点会额外显示两个输入控件：“X偏移 (向右拖动)”和“Y偏移 (向下拖动)”。
4. 填入偏移量：计算出滑块需要移动的水平距离（例如缺口位置 - 滑块初始位置 = 280px），填入 X 偏移。Y 偏移通常为 0。
5. 调整拖拽细节：高级选项中的“平滑步数”设为 30~50（越多越像真人），勾选“忽略报错”避免因验证失败而中断主流程。
6. 串联执行：将前置动作的 Exec 输出连接到本节点，拖动完成后 Exec 输出可连接【点击元素】提交验证。

场景案例：将列表中的第二项拖到首项前面（排序）

1. 定位源元素：源元素选择器设为列表第二项（如 ul li:nth-child(2)）。
2. 选择拖向目标：定位方式选择“拖向目标元素”，此时节点会显示“目标元素”输入端口和对应的备选列表控件。
3. 设定目标：用【智能定位元素】获取列表首项（ul li:first-child）的定位器，填入“目标元素”。
4. 执行：节点会将第二项平滑拖到首项的位置，从而实现交换排序。

技巧：偏移模式中的 X 和 Y 支持连线动态传入，你可以通过变量或计算节点实时调整滑块距离，应对不断变化的验证码缺口位置。

⚙️ 引脚与参数说明

📥 输入引脚

⚙️ 控件参数

📤 输出引脚

💎 小贴士：

• 滑块验证码的缺口距离通常需要结合页面元素尺寸和背景图计算，可使用“获取元素位置”节点获得滑块和缺口的坐标，然后计算差值作为 X 偏移。
• 拖拽过程中会自动添加小幅度的随机抖动（模拟人手不稳定），提高验证码通过率。
• 如果页面使用 HTML5 Drag & Drop API，单纯 CDP 物理拖拽可能无法触发相关事件，此时可尝试先用“执行自定义JS”派发 DragEvent 协助。
• 拖拽前源元素会自动滚动到可见区域，若页面加载较慢，可适当增加重试次数。