Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →To drag an element with Puppeteer’s low-level Mouse API, move to a point on the source, press the mouse button, move to a point on the target while keeping the button pressed, and release it. Use viewport-relative main-frame CSS-pixel coordinates; for elements, you can obtain their positions with boundingBox().
Drag an element with mouse coordinates
This runnable example uses locators to find the elements, then their bounding boxes to calculate center points. Adjust the source point if the interface requires dragging from a dedicated handle.
As an Amazon Associate I earn from qualifying purchases.
const sourceBox = await page.locator('[data-testid="source"]').boundingBox();
const targetBox = await page.locator('[data-testid="target"]').boundingBox();
if (!sourceBox || !targetBox) {
throw new Error('Drag source or target is not in layout');
}
const source = {
x: sourceBox.x + sourceBox.width / 2,
y: sourceBox.y + sourceBox.height / 2,
};
const target = {
x: targetBox.x + targetBox.width / 2,
y: targetBox.y + targetBox.height / 2,
};
await page.mouse.move(source.x, source.y);
await page.mouse.down();
await page.mouse.move(target.x, target.y, { steps: 10 });
await page.mouse.up();The source and target selectors are examples; replace them with selectors present on your page. Puppeteer’s interaction guide recommends locators for selecting and interacting with elements. Locators wait for elements and check readiness conditions; the custom mouse sequence gives you coordinate-level control.
Recommended Free Tools
boundingBox() returns a box relative to the main frame, or null when the element is not part of layout. The center-point calculation is a practical default, not a Puppeteer requirement: choose a point inside the actual draggable area. See the boundingBox reference.
#1 Best Overall
Choose between a manual drag and dragAndDrop
Use the mouse sequence for coordinate control
The four calls—move, down, move, up—let you control where the gesture starts and ends. The Mouse class operates in main-frame CSS pixels measured from the viewport’s top-left corner. page.mouse is the Mouse instance for the page.
Use the Mouse dragAndDrop helper for a drag event sequence
For a more compact alternative, use await page.mouse.dragAndDrop(source, target), where source and target are coordinate points. The documented helper performs drag, dragenter, dragover, and drop in sequence. Its optional delay sets the wait between dragover and drop; the documented default is zero. Check the dragAndDrop API reference for the signature matching your installed version.
Rank #2
Do not confuse this helper with page.mouse.drag(start, target). The separate drag API dispatches a drag event and returns drag data; its reference does not describe the complete drag-enter/over/drop sequence.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Set movement steps when the path matters
page.mouse.move(x, y, options) moves to a coordinate. Its optional steps value controls the number of intermediate movements between the current position and destination; the documented default is 1. A larger value can help when an application expects movement along a path, but Puppeteer does not promise that any particular step count will make a site’s drag work. See the move reference.
Understand the limits of synthetic mouse events
Puppeteer documents that Mouse API events are synthetic MouseEvents and do not fully replicate normal user mouse behavior. Its Mouse documentation specifically warns that “dragging and selecting text is not possible using page.mouse.” A basic press-and-move sequence therefore may not match a UI that relies on native HTML drag-and-drop behavior or a framework-specific pointer or touch interaction. The dedicated dragAndDrop helper has the documented drag-event sequence, but no universal method is guaranteed to work for every interface.
Troubleshoot a drag that does not take
- The bounding box is null: the element is not part of layout. Check that it exists, is attached, and is rendered before requesting its box.
- The gesture starts in the wrong place: use coordinates on the draggable handle or active region rather than assuming the element’s center initiates dragging.
- The target is missed: confirm both elements are positioned in the viewport when you calculate coordinates. Recalculate boxes if the page layout changes between measurement and interaction.
- The calls complete but the UI does not change: inspect whether the interface expects a particular drag event sequence or a pointer/touch interaction. Try the documented
page.mouse.dragAndDrophelper when a full HTML drag-and-drop sequence is appropriate. - The apparent drop is not accepted: verify the resulting DOM or visible application state; successful input calls alone do not establish that the page accepted the drop.
Or skip the browser setup
If your goal is to capture a page rather than automate a drag gesture, ScreenshotNeo provides a website screenshot API and MCP server. A single GET request can return an image or PDF; it does not perform Puppeteer drag interactions.
Rank #4
cURL example, with the API options documented at ScreenshotNeo’s API documentation:
Quick Recap
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpScreenshotNeo removes cookie banners, popups, and chat widgets before capture. Bot checks, blank pages, and failed loads are never billed. Its MCP server lets AI agents take screenshots. The Free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000.
Sign up for ScreenshotNeo’s free plan.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
