# browser_html5_drag_drop

## Browser Html5 Drag Drop

Perform HTML5 drag and drop using proper DragEvent dispatch. Use this for elements with draggable='true' attribute, sortable lists, and interfaces using the HTML5 Drag and Drop API. Dispatches dragstart, dragover, drop, and dragend events in the correct sequence.

## Usage Example

### CURL

```bash
curl -X POST \
 -H "Authorization: Bearer <token>" \
 -H "Content-Type: application/json" \
 -d '{

"context_id": "ctx_000001",

"source_selector": "<source_selector>",

"target_selector": "<target_selector>"

}' \
http://localhost:8080/api/execute/browser_html5_drag_drop
```

### Python SDK

```python
import asyncio

from owl_browser import OwlBrowser, RemoteConfig

# Async usage
async with OwlBrowser(config) as browser:
    context = await browser.create_context()
    context_id = context["context_id"]
    await browser.html5_drag_drop(
        context_id=context_id,
        source_selector="value",
        target_selector="value"
    )
```

### Node.js SDK

```javascript
import { OwlBrowser } from '@olib-ai/owl-browser-sdk';

// Async usage
const ctx = await browser.createContext();
const contextId = ctx.context_id;
await browser.html5DragDrop({
    context_id: contextId,
    source_selector: 'value',
    target_selector: 'value'
});
```

## Parameters

### Required

- `context_id`  **string**  required  
  The unique identifier of the browser context (e.g., 'ctx_000001')

- `source_selector`  **string**  required  
  CSS selector for the draggable source element (must have draggable='true' attribute). Example: '.drag-item', '[data-id="item-1"]'

- `target_selector`  **string**  required  
  CSS selector for the drop target element. The element that will receive the dropped item. Example: '.drop-zone', '#target-container'

## Response

Returns a JSON object with the operation result.

```json
{
  "success": true,
  "result": <value>
}
```