# MCP Drag and Drop Test Examples

This document provides examples of how to use the enhanced drag and drop tools through the MCP interface.

## Overview

Cremote now supports three types of drag and drop operations with enhanced HTML5 support:

1. **Element to Element**: Drag from one element to another element (with HTML5 event support)
2. **Element to Coordinates**: Drag from an element to specific x,y coordinates (with smart target detection)
3. **Element by Offset**: Drag from an element by a relative pixel offset (with smart target detection)

## Enhanced Features (Phase 6 Improvements)

- **HTML5 Event Support**: All drag operations now properly trigger HTML5 drag and drop events (dragstart, dragover, drop, dragend)
- **Smart Target Detection**: Coordinate and offset drags automatically detect valid drop targets at destination
- **Hybrid Approach**: Functions try HTML5 approach first, fall back to mouse events if needed
- **Improved Reliability**: Much better compatibility with modern web applications that rely on HTML5 drag and drop

## Example 1: Basic Drag and Drop Between Elements

```yaml
# Navigate to a page with draggable elements
web_navigate_cremotemcp:
  url: "https://www.w3schools.com/html/html5_draganddrop.asp"
  timeout: 10

# Drag an image from one div to another
web_drag_and_drop_cremotemcp:
  source: "#drag1"
  target: "#div2"
  timeout: 10

# Take a screenshot to verify the result
web_screenshot_cremotemcp:
  output: "/tmp/drag-drop-result.png"
```

## Example 2: Sortable List Testing

```yaml
# Navigate to a sortable list demo
web_navigate_cremotemcp:
  url: "https://jqueryui.com/sortable/"

# Switch to the demo iframe
web_iframe_cremotemcp:
  action: "enter"
  selector: ".demo-frame"

# Drag the first item to the third position
web_drag_and_drop_cremotemcp:
  source: "#sortable li:first-child"
  target: "#sortable li:nth-child(3)"
  timeout: 10

# Switch back to main frame
web_iframe_cremotemcp:
  action: "exit"

# Take a screenshot
web_screenshot_cremotemcp:
  output: "/tmp/sortable-test.png"
```

## Example 3: Kanban Board Testing

```yaml
# Navigate to a kanban board application
web_navigate_cremotemcp:
  url: "https://example.com/kanban-board"

# Drag a card from "To Do" to "In Progress"
web_drag_and_drop_cremotemcp:
  source: ".todo-column .card:first-child"
  target: ".in-progress-column"
  timeout: 15

# Verify the card moved by checking the target column
web_element_check_cremotemcp:
  selector: ".in-progress-column .card"
  check_type: "exists"

# Take a screenshot of the updated board
web_screenshot_cremotemcp:
  output: "/tmp/kanban-board-updated.png"
```

## Example 4: Drag and Drop to Specific Coordinates

```yaml
# Navigate to a drawing or design application
web_navigate_cremotemcp:
  url: "https://example.com/design-tool"

# Drag an element to a specific position on the canvas
web_drag_and_drop_coordinates_cremotemcp:
  source: ".toolbar .shape-tool"
  x: 400
  y: 300
  timeout: 10

# Drag another element to a different position
web_drag_and_drop_coordinates_cremotemcp:
  source: ".toolbar .text-tool"
  x: 200
  y: 150
  timeout: 10

# Take a screenshot of the canvas
web_screenshot_cremotemcp:
  output: "/tmp/design-canvas.png"
```

## Example 5: File Upload via Drag and Drop

```yaml
# Navigate to a file upload page
web_navigate_cremotemcp:
  url: "https://example.com/file-upload"

# First, upload a file to the container (if needed)
file_upload_cremotemcp:
  local_path: "/home/user/test-file.pdf"
  container_path: "/tmp/test-file.pdf"

# Simulate dragging a file to the upload area
# Note: This simulates the drag gesture, actual file upload may require different handling
web_drag_and_drop_cremotemcp:
  source: ".file-selector"
  target: ".upload-drop-zone"
  timeout: 15

# Check if upload was successful
web_element_check_cremotemcp:
  selector: ".upload-success"
  check_type: "visible"
```

## Example 6: Dashboard Widget Rearrangement

```yaml
# Navigate to a dashboard
web_navigate_cremotemcp:
  url: "https://example.com/dashboard"

# Drag a widget by relative offset to rearrange layout
web_drag_and_drop_offset_cremotemcp:
  source: "#widget-sales"
  offset_x: 200
  offset_y: 0
  timeout: 10

# Drag another widget to a different position
web_drag_and_drop_offset_cremotemcp:
  source: "#widget-analytics"
  offset_x: -150
  offset_y: 100
  timeout: 10

# Take a screenshot of the rearranged dashboard
web_screenshot_cremotemcp:
  output: "/tmp/dashboard-rearranged.png"
```

## Example 7: Form Builder Testing

```yaml
# Navigate to a form builder application
web_navigate_cremotemcp:
  url: "https://example.com/form-builder"

# Drag a text input from the toolbox to the form area
web_drag_and_drop_cremotemcp:
  source: ".toolbox .text-input"
  target: ".form-canvas"
  timeout: 10

# Drag a button element to the form
web_drag_and_drop_cremotemcp:
  source: ".toolbox .button-element"
  target: ".form-canvas"
  timeout: 10

# Rearrange elements by dragging the button below the text input
web_drag_and_drop_cremotemcp:
  source: ".form-canvas .button-element"
  target: ".form-canvas .text-input"
  timeout: 10

# Take a screenshot of the built form
web_screenshot_cremotemcp:
  output: "/tmp/form-builder-result.png"
```

## Example 8: Game Testing - Puzzle Game

```yaml
# Navigate to a puzzle game
web_navigate_cremotemcp:
  url: "https://example.com/puzzle-game"

# Drag puzzle pieces to solve the puzzle
web_drag_and_drop_cremotemcp:
  source: "#piece-1"
  target: "#slot-1"
  timeout: 10

web_drag_and_drop_cremotemcp:
  source: "#piece-2"
  target: "#slot-2"
  timeout: 10

# Check if puzzle is solved
web_element_check_cremotemcp:
  selector: ".puzzle-solved"
  check_type: "visible"

# Take a screenshot of the completed puzzle
web_screenshot_cremotemcp:
  output: "/tmp/puzzle-completed.png"
```

## Integration with Other Tools

Drag and drop works seamlessly with other cremote MCP tools:

- Use with `web_element_check_cremotemcp` to verify drag results
- Combine with `web_screenshot_cremotemcp` for visual verification
- Use with `web_navigate_cremotemcp` to test different drag and drop implementations
- Integrate with `web_form_analyze_cremotemcp` for form builder testing
- Use with `web_iframe_cremotemcp` for testing drag and drop in embedded content

## Best Practices

1. **Use appropriate timeouts** - Drag and drop operations may take longer than simple clicks
2. **Verify results** - Always check that the drag and drop had the expected effect
3. **Take screenshots** - Visual verification is important for drag and drop testing
4. **Test different scenarios** - Try element-to-element, coordinates, and offset methods
5. **Handle iframes** - Switch iframe context when testing embedded drag and drop widgets

## Common Use Cases

- **File Upload Testing**: Drag files to upload areas
- **Sortable List Testing**: Reorder items in lists
- **Kanban Board Testing**: Move cards between columns
- **Dashboard Testing**: Rearrange widgets and components
- **Form Builder Testing**: Drag form elements to build layouts
- **Game Testing**: Test drag-based game mechanics
- **Image Gallery Testing**: Rearrange images or media
- **UI Component Testing**: Test custom drag and drop components