This commit is contained in:
Josh at WLTechBlog
2025-09-30 15:10:13 -05:00
parent 396718be59
commit cb4ec135ec
5 changed files with 520 additions and 95 deletions

View File

@@ -1034,8 +1034,8 @@ web_clear_storage_cremotemcp:
timeout: 5
```
### 34. `web_drag_and_drop_cremotemcp` *(New in Phase 6)*
Perform drag and drop operation from source element to target element.
### 34. `web_drag_and_drop_cremotemcp` *(Enhanced in Phase 6)*
Perform drag and drop operation from source element to target element with enhanced HTML5 support.
**Parameters:**
- `source` (required): CSS selector for the source element to drag
@@ -1043,23 +1043,29 @@ Perform drag and drop operation from source element to target element.
- `tab` (optional): Tab ID (uses current tab if not specified)
- `timeout` (optional): Timeout in seconds (default: 5)
**Enhanced Features:**
- Automatically triggers proper HTML5 drag and drop events (dragstart, dragover, drop, dragend)
- Works reliably with modern web applications that use HTML5 drag and drop
- Intelligent fallback to mouse events if HTML5 approach fails
- Supports all drag and drop frameworks (HTML5, jQuery UI, custom implementations)
**Example Usage:**
```
# Drag item to drop zone
# Drag item to drop zone (now with HTML5 event support)
web_drag_and_drop_cremotemcp:
source: ".draggable-item"
target: ".drop-zone"
timeout: 10
# Drag file to upload area
# Drag file to upload area (works with modern upload widgets)
web_drag_and_drop_cremotemcp:
source: "#file-item"
target: "#upload-area"
tab: "tab-123"
```
### 35. `web_drag_and_drop_coordinates_cremotemcp` *(New in Phase 6)*
Perform drag and drop operation from source element to specific coordinates.
### 35. `web_drag_and_drop_coordinates_cremotemcp` *(Enhanced in Phase 6)*
Perform drag and drop operation from source element to specific coordinates with smart target detection.
**Parameters:**
- `source` (required): CSS selector for the source element to drag
@@ -1068,16 +1074,22 @@ Perform drag and drop operation from source element to specific coordinates.
- `tab` (optional): Tab ID (uses current tab if not specified)
- `timeout` (optional): Timeout in seconds (default: 5)
**Enhanced Features:**
- **Smart Target Detection**: Automatically finds valid drop targets at the specified coordinates
- **HTML5 Event Support**: Triggers proper drag and drop events when valid targets are found
- **Intelligent Method Selection**: Uses element-to-element drag if drop target detected, otherwise uses coordinate-based approach
- **Improved Reliability**: Much more likely to trigger drop events in modern web applications
**Example Usage:**
```
# Drag item to specific coordinates
# Drag item to specific coordinates (now with smart target detection)
web_drag_and_drop_coordinates_cremotemcp:
source: ".draggable-item"
x: 300
y: 200
timeout: 10
# Drag widget to precise position
# Drag widget to precise position (automatically detects drop zones)
web_drag_and_drop_coordinates_cremotemcp:
source: "#dashboard-widget"
x: 150
@@ -1085,8 +1097,8 @@ web_drag_and_drop_coordinates_cremotemcp:
tab: "tab-123"
```
### 36. `web_drag_and_drop_offset_cremotemcp` *(New in Phase 6)*
Perform drag and drop operation from source element by relative offset.
### 36. `web_drag_and_drop_offset_cremotemcp` *(Enhanced in Phase 6)*
Perform drag and drop operation from source element by relative offset with smart target detection.
**Parameters:**
- `source` (required): CSS selector for the source element to drag
@@ -1095,20 +1107,26 @@ Perform drag and drop operation from source element by relative offset.
- `tab` (optional): Tab ID (uses current tab if not specified)
- `timeout` (optional): Timeout in seconds (default: 5)
**Enhanced Features:**
- **Smart Target Detection**: Calculates destination coordinates and automatically finds valid drop targets
- **HTML5 Event Support**: Triggers proper drag and drop events when valid targets are found at destination
- **Intelligent Method Selection**: Uses element-to-element drag if drop target detected, otherwise uses coordinate-based approach
- **Improved Reliability**: Much more likely to trigger drop events when dragging to areas with drop zones
**Example Usage:**
```
# Drag item by relative offset
# Drag item by relative offset (now with smart target detection)
web_drag_and_drop_offset_cremotemcp:
source: ".draggable-item"
offset_x: 100
offset_y: 50
timeout: 10
# Move element slightly to the right and down
# Move element to adjacent drop zone (automatically detects targets)
web_drag_and_drop_offset_cremotemcp:
source: "#moveable-element"
offset_x: 25
offset_y: 25
offset_x: 200
offset_y: 0
tab: "tab-123"
```