Skip to main content
Glama

drag

Drag an element onto another element in a live Chrome browser for automation, debugging, and testing purposes.

Instructions

Drag an element onto another element

Input Schema

TableJSON Schema
NameRequiredDescriptionDefault
from_uidYesThe uid of the element to drag
to_uidYesThe uid of the element to drop into

Implementation Reference

  • The handler function that implements the drag tool logic. It retrieves ElementHandles using UIDs, performs the drag and drop operation with a small delay, updates the response, and cleans up handles.
    handler: async (request, response, context) => { const fromHandle = await context.getElementByUid(request.params.from_uid); const toHandle = await context.getElementByUid(request.params.to_uid); try { await context.waitForEventsAfterAction(async () => { await fromHandle.drag(toHandle); await new Promise(resolve => setTimeout(resolve, 50)); await toHandle.drop(fromHandle); }); response.appendResponseLine(`Successfully dragged an element`); response.setIncludeSnapshot(true); } finally { void fromHandle.dispose(); void toHandle.dispose(); } },
  • Zod schema defining the input parameters for the drag tool: from_uid and to_uid.
    schema: { from_uid: z.string().describe('The uid of the element to drag'), to_uid: z.string().describe('The uid of the element to drop into'), },
  • The registration of the 'drag' tool using defineTool, exporting it with name, description, annotations, schema, and handler.
    export const drag = defineTool({ name: 'drag', description: `Drag an element onto another element`, annotations: { category: ToolCategories.INPUT_AUTOMATION, readOnlyHint: false, }, schema: { from_uid: z.string().describe('The uid of the element to drag'), to_uid: z.string().describe('The uid of the element to drop into'), }, handler: async (request, response, context) => { const fromHandle = await context.getElementByUid(request.params.from_uid); const toHandle = await context.getElementByUid(request.params.to_uid); try { await context.waitForEventsAfterAction(async () => { await fromHandle.drag(toHandle); await new Promise(resolve => setTimeout(resolve, 50)); await toHandle.drop(fromHandle); }); response.appendResponseLine(`Successfully dragged an element`); response.setIncludeSnapshot(true); } finally { void fromHandle.dispose(); void toHandle.dispose(); } }, });

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/SHAY5555-gif/chrome-devtools-mcp'

If you have feedback or need assistance with the MCP directory API, please join our Discord server