1. Overview

2. Syntax

dragAndDrop(<from_locator>, <to_locator>, <seconds>);

Parameter	Data Type	Description
from_locator	STRING	Identifies the element to be dragged. Note: Locators can be found by manually inspecting the webpage for the element, or by using an element already saved through a recording session. Learn more about Elements
to_locator	STRING	Identifies where the dragged element is dropped. Accepts either a locator, to drop onto a specific element, or coordinates in the format "x:<point>, y:<point>", to drop at an exact pixel position.
seconds	LONG	Duration the drag gesture takes to move from the starting point to the drop target, in seconds. Note: The time duration must be less than 10 seconds.

3. Examples

Dragging the second item in a sortable list above the first item reorders them on the page.

// Open the list page using the Open URL task
openURL("https://www.<website_name>.com/<list_page>", "same window");
// Drag the second list item above the first item using the Drag and Drop task
dragAndDrop(ui.<list_page>.<second_item>, ui.<list_page>.<first_item>, 5);
// Confirm the second item now appears first using the Assert Text task
assertText(ui.<list_page>.<first_position>, "Second item", errorhandling.STOP_ON_ERROR);

where:

Drag a dashboard tile into an empty layout slot to reposition it on the page.

// Open the dashboard page using the Open URL task
openURL("<website_name>/<dashboard_page>", "same window");
// Drag the tile into the target layout slot using the Drag and Drop task
dragAndDrop(ui.<dashboard_page>.<tile>, ui.<dashboard_page>.<layout_slot>, 5);
// Confirm the tile now appears in the new layout slot using the Assert Visible task
assertVisible(ui.<dashboard_page>.<tile_in_new_slot>, errorhandling.STOP_ON_ERROR);

where:

Drag a card to a specific pixel position on the page instead of onto another element.

// Open the board page using the Open URL task
openURL("https://www.<website_name>.com/<board_page>", "same window");
// Drag the card to a specific pixel position using the Drag and Drop task
dragAndDrop(ui.<board_page>.<card>, "x:800, y:400", 5);
// Confirm the card is now visible at the target position using the Assert Visible task
assertVisible(ui.<board_page>.<card>, errorhandling.STOP_ON_ERROR);

where:

Drag a chart widget into a new position on a dashboard page in a Zoho Creator Sales Insights application.

// Open the Sales Overview dashboard in a Zoho Creator Sales Insights application using the Open URL task
openURL("https://creatorapp.zoho.com/<orgname>/sales-insights#Page:Sales_Overview", "same window");
// Drag the chart widget into the new layout position using the Drag and Drop task
dragAndDrop(ui.salesinsights.chart-widget, ui.salesinsights.widget-layout-slot, 5);
// Confirm the chart widget now appears in its new position using the Assert Visible task
assertVisible(ui.salesinsights.chart-widget-in-new-slot, errorhandling.STOP_ON_ERROR);

where:

4. Use cases

Consider a task management application where users organize work items by dragging them into a preferred order. After reordering, the application should save the updated sequence so that it remains consistent when the page is refreshed or reopened.

A tester uses Zoho QEngine to confirm that dragging a list item to a new position updates the order correctly and that the new arrangement persists after the page is reloaded.

Steps

1. Open the list page in the same window.
2. Drag the second item above the first item.
3. Reload the list page.
4. Confirm the second item still appears first.

Implementation

// Step 1: Open the list page in the same window using the Open URL task
openURL("https://www.<website_name>.com/<list_page>", "same window");
// Step 2: Drag the second list item above the first item using the Drag and Drop task
dragAndDrop(ui.<list_page>.<second_item>, ui.<list_page>.<first_item>, 5);
// Step 3: Reload the list page using the Open URL task
openURL("https://www.<website_name>.com/<list_page>", "same window");
// Step 4: Confirm the second item still appears first using the Assert Text task
assertText(ui.<list_page>.<first_position>, "Second item", errorhandling.STOP_ON_ERROR);

Consider a dashboard application where users personalize their workspace by rearranging tiles into a preferred layout. Once a tile is moved into a new slot, that arrangement should persist the next time the dashboard loads, rather than resetting to its default layout.

A tester uses Zoho QEngine to confirm that dragging a tile into a new layout slot updates its position and that the new layout persists after the dashboard is reloaded.

Steps

1. Open the dashboard page in the same window.
2. Drag the tile into the target layout slot.
3. Reload the dashboard page.
4. Confirm the tile still appears in the new layout slot.

Implementation

// Step 1: Open the dashboard page in the same window using the Open URL task
openURL("<website_name>/<dashboard_page>", "same window");
// Step 2: Drag the tile into the target layout slot using the Drag and Drop task
dragAndDrop(ui.<dashboard_page>.<tile>, ui.<dashboard_page>.<layout_slot>, 5);
// Step 3: Reload the dashboard page using the Open URL task
openURL("<website_name>/<dashboard_page>", "same window");
// Step 4: Confirm the tile still appears in the new layout slot using the Assert Visible task
assertVisible(ui.<dashboard_page>.<tile_in_new_slot>, errorhandling.STOP_ON_ERROR);

A tester uses Zoho QEngine to confirm that dragging a task card into a new column updates its status field to match.

Steps

1. Open the Vendor Tasks Kanban report in the Vendor Compass application.
2. Wait for the task card to be present in the In Progress column.
3. Drag the task card from the In Progress column to the Completed column.
4. Confirm the task card is now visible in the Completed column.
5. Open the task's record and confirm its status field reads Completed.

Implementation

// Step 1: Open the Vendor Tasks Kanban report in a Zoho Creator Vendor Compass application using the Open URL task
openURL("https://creatorapp.zoho.com/<orgname>/vendor-compass#Report:Vendor_Tasks", "same window");
// Step 2: Wait until the task card is present in the In Progress column
wait(10, ui.vendorcompass.task-card-in-progress, event.PRESENT);
// Step 3: Drag the task card from the In Progress column to the Completed column using the Drag and Drop task
dragAndDrop(ui.vendorcompass.task-card-in-progress, ui.vendorcompass.completed-column, 5);
// Step 4: Confirm the task card is now visible in the Completed column using the Assert Visible task
assertVisible(ui.vendorcompass.task-card-completed, errorhandling.STOP_ON_ERROR);
// Step 5: Open the task's record and confirm its status field reads Completed using the Assert Value task
click(ui.vendorcompass.task-card-completed);
assertValue(ui.vendorcompass.task-status-field, "Completed", errorhandling.STOP_ON_ERROR);

5. Points to note

1. Set the duration parameter high enough for the page to register the full drag, but avoid unnecessarily long durations that slow test execution. The maximum allowed duration is 10 seconds.
2. The drop target can be either an element's locator or an exact pixel position, use whichever the interaction being tested actually depends on.
3. Confirm the result of a drag and drop with an assertion task, rather than assuming the element landed in the expected location.
4. Prefer logical locators, such as CSS attribute selectors or recorded locators, over raw full XPath strings when locating the elements being dragged and dropped.
5. If the element sits inside an iframe, switch into that iframe with the Switch To task before dragging. A locator only resolves against whichever frame is currently active.
6. Use Scroll To to bring the drop target into view, then pair it with an event-based Wait task to allow any sticky headers, overlays, or animations to finish before calling Drag and Drop. This helps ensure the target is ready for the drop operation.
7. Drag and Drop works whether a page uses the browser's built-in drag events or its own custom JavaScript to handle dragging.

6. Related topics

1. Click
2. Scroll To
3. Hover

7. What's next