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();
        }
      },
    });
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Annotations only provide readOnlyHint=false, indicating this is a mutation operation. The description adds no behavioral context beyond the basic action - no information about what 'drag' actually does (e.g., triggers drag-and-drop events, may cause page reflows, might be asynchronous), no error conditions, and no performance implications. With minimal annotation coverage, the description carries most of the burden but provides inadequate behavioral disclosure.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is extremely concise - a single sentence that directly states the tool's purpose with zero wasted words. It's perfectly front-loaded and appropriately sized for what it communicates.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a mutation tool with minimal annotations and no output schema, the description is incomplete. It doesn't explain what happens after dragging (e.g., does it wait for drop completion?), what visual feedback occurs, whether it simulates mouse events, or what the expected outcome should be. Given the complexity of drag-and-drop interactions in web contexts, this leaves significant gaps.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, with both parameters clearly documented in the schema itself. The description doesn't add any meaningful parameter semantics beyond what's already in the schema - it doesn't explain what constitutes a valid 'element' uid, whether these must be draggable/droppable elements, or any constraints on the relationship between from_uid and to_uid.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the action ('Drag') and the objects involved ('an element onto another element'), providing a specific verb+resource combination. However, it doesn't explicitly distinguish this tool from potential sibling interactions like 'click' or 'hover' beyond the obvious difference in action type.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description provides no guidance on when to use this tool versus alternatives. There's no mention of prerequisites (e.g., elements must be visible), when dragging is appropriate versus other interactions, or what happens after the drag operation completes.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Install Server

Other Tools

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