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

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

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

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.

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