Drag and Drop

Learn dragAndDrop and clickAndHold for moving elements on the page

Concept

In this practice lab, you will learn how to simulate drag-and-drop interactions with Selenium using the Actions class.

Drag-and-drop is a common UI pattern used in many applications:

Move items between lists or containers
Reorder elements in sortable lists
Adjust sliders and range controls
Upload files by dragging them to upload zones
Resize or reposition elements on a canvas

Drag and Drop Fundamentals

A drag-and-drop operation consists of: (1) clicking and holding on the source element, (2) moving the mouse to the target location, and (3) releasing the mouse button. Selenium provides convenience methods to perform this sequence.

dragAndDrop(source, target)

The high-level method that combines all drag-and-drop steps into one action.

actions.dragAndDrop(source, target)
.perform();

What it does: Clicks and holds the source element, moves to the center of the target element, then releases.

Best Practice

Use dragAndDrop() when you have clear locators for both source and target elements. It's the simplest and most readable approach.

dragAndDropBy(source, xOffset, yOffset)

Drags an element by a specific pixel offset instead of to a target element.

actions.dragAndDropBy(slider, 100, 0)
.perform();

What it does: Clicks and holds the source, moves by the specified x and y offsets, then releases.

Best Practice

Use dragAndDropBy() for sliders, range controls, or when you need pixel-precise movement. Essential for testing draggable UI components.

Manual Drag-and-Drop (Advanced)

For complex scenarios, you can manually control each step of the drag-and-drop operation:

actions.clickAndHold(source)
       .moveToElement(target)
       .release()
       .perform();

clickAndHold(source) - Press and hold the mouse button on the source
moveToElement(target) - Move the mouse (while holding) to the target
release() - Release the mouse button at the current position

When to Use Manual Approach

Use the manual approach when you need to add pauses, move through intermediate points, or troubleshoot drag-and-drop issues. Start with dragAndDrop() first; only use manual if needed.

Interactive Practice

Imagine a page called "Drag and Drop Playground" with the following interactive elements:

Drag and Drop Playground

1. Drag and Drop Zone:

Drag me

→

Drop here

Drag the box to the drop zone

2. Slider Control (dragAndDropBy):

0Value: 50100

Drag the slider handle to adjust value

Interact with these elements directly to see how Selenium's drag actions would work!

Manual interaction (student mental model)

If you were doing this with a real mouse:

Click and hold the "Drag me" box.
While holding the mouse button down, move the mouse over to the "Drop here" area.
Release the mouse button to drop the element.
For the slider, click and hold the slider handle, then drag it left or right to adjust the value.

Your Selenium code will automate these exact behaviors using dragAndDrop() and dragAndDropBy().

Java Code Example

DragAndDropActions.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
WebElement draggable = driver.findElement(By.id("draggable"));
WebElement droppable = driver.findElement(By.id("droppable"));
WebElement slider = driver.findElement(By.id("slider"));

Actions actions = new Actions(driver);

// 1. Simple drag and drop from source to target
actions.dragAndDrop(draggable, droppable).perform();

// 2. Drag slider by pixel offset (100 pixels right)
actions.dragAndDropBy(slider, 100, 0).perform();

// 3. Manual drag-and-drop with intermediate steps
actions.clickAndHold(draggable)
       .moveToElement(droppable)
       .pause(Duration.ofMillis(500))
       .release()
       .perform();

driver.quit();

Code Breakdown

driver.findElement(By.id("draggable")): Locates the draggable element that will be moved.
driver.findElement(By.id("droppable")): Locates the drop zone where the element will be dropped.
driver.findElement(By.id("slider")): Finds the slider handle element that can be dragged to adjust values.
actions.dragAndDrop(draggable, droppable).perform();: Performs a complete drag-and-drop operation in one method call. Clicks and holds the draggable element, moves it to the center of the droppable element, and releases.
actions.dragAndDropBy(slider, 100, 0).perform();: Drags the slider handle 100 pixels to the right (x-offset) and 0 pixels vertically (y-offset). Perfect for testing sliders and range controls.
actions.clickAndHold(draggable): Manually starts the drag operation by clicking and holding the mouse button down on the draggable element.
.moveToElement(droppable): While still holding the mouse button, moves the pointer to the center of the drop zone.
.pause(Duration.ofMillis(500)): Pauses for 500 milliseconds before releasing. This can help with timing-sensitive drag-and-drop implementations or for visual debugging.
.release(): Releases the mouse button, completing the drag-and-drop operation at the current mouse position.
driver.quit();: Closes the browser and ends the WebDriver session.

Pro Tip

Start with dragAndDrop()

Always try dragAndDrop(source, target) first. It's the simplest approach and works for most scenarios. Only use manual clickAndHold/moveToElement/release if dragAndDrop() fails.

Ensure Elements Are Visible

Both source and target elements must be visible and within the viewport. Scroll them into view if necessary before attempting drag-and-drop operations.

Use Stable Locators

Drag-and-drop targets should have stable, unique IDs or data attributes. Avoid using complex CSS selectors or XPath expressions that might break if the page structure changes.

Concept

In this practice lab, you will learn how to simulate drag-and-drop interactions with Selenium using the Actions class.

Drag-and-drop is a common UI pattern used in many applications:

Move items between lists or containers

Reorder elements in sortable lists

Adjust sliders and range controls

Upload files by dragging them to upload zones

Resize or reposition elements on a canvas

Drag and Drop Fundamentals

dragAndDrop(source, target)

The high-level method that combines all drag-and-drop steps into one action.

actions.dragAndDrop(source, target)
.perform();

What it does: Clicks and holds the source element, moves to the center of the target element, then releases.

Best Practice

Use dragAndDrop() when you have clear locators for both source and target elements. It's the simplest and most readable approach.

dragAndDropBy(source, xOffset, yOffset)

Drags an element by a specific pixel offset instead of to a target element.

actions.dragAndDropBy(slider, 100, 0)
.perform();

What it does: Clicks and holds the source, moves by the specified x and y offsets, then releases.

Best Practice

Use dragAndDropBy() for sliders, range controls, or when you need pixel-precise movement. Essential for testing draggable UI components.

Manual Drag-and-Drop (Advanced)

For complex scenarios, you can manually control each step of the drag-and-drop operation:

actions.clickAndHold(source)
       .moveToElement(target)
       .release()
       .perform();

clickAndHold(source) - Press and hold the mouse button on the source
moveToElement(target) - Move the mouse (while holding) to the target
release() - Release the mouse button at the current position

When to Use Manual Approach

Use the manual approach when you need to add pauses, move through intermediate points, or troubleshoot drag-and-drop issues. Start with dragAndDrop() first; only use manual if needed.

Interactive Practice

Imagine a page called "Drag and Drop Playground" with the following interactive elements:

Drag and Drop Playground

1. Drag and Drop Zone:

Drag me

→

Drop here

Drag the box to the drop zone

2. Slider Control (dragAndDropBy):

0Value: 50100

Drag the slider handle to adjust value

Interact with these elements directly to see how Selenium's drag actions would work!

Manual interaction (student mental model)

If you were doing this with a real mouse:

Click and hold the "Drag me" box.
While holding the mouse button down, move the mouse over to the "Drop here" area.
Release the mouse button to drop the element.
For the slider, click and hold the slider handle, then drag it left or right to adjust the value.

Your Selenium code will automate these exact behaviors using dragAndDrop() and dragAndDropBy().

Java Code Example

DragAndDropActions.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
WebElement draggable = driver.findElement(By.id("draggable"));
WebElement droppable = driver.findElement(By.id("droppable"));
WebElement slider = driver.findElement(By.id("slider"));

Actions actions = new Actions(driver);

// 1. Simple drag and drop from source to target
actions.dragAndDrop(draggable, droppable).perform();

// 2. Drag slider by pixel offset (100 pixels right)
actions.dragAndDropBy(slider, 100, 0).perform();

// 3. Manual drag-and-drop with intermediate steps
actions.clickAndHold(draggable)
       .moveToElement(droppable)
       .pause(Duration.ofMillis(500))
       .release()
       .perform();

driver.quit();

Code Breakdown

driver.findElement(By.id("draggable")): Locates the draggable element that will be moved.
driver.findElement(By.id("droppable")): Locates the drop zone where the element will be dropped.
driver.findElement(By.id("slider")): Finds the slider handle element that can be dragged to adjust values.
actions.dragAndDrop(draggable, droppable).perform();: Performs a complete drag-and-drop operation in one method call. Clicks and holds the draggable element, moves it to the center of the droppable element, and releases.
actions.dragAndDropBy(slider, 100, 0).perform();: Drags the slider handle 100 pixels to the right (x-offset) and 0 pixels vertically (y-offset). Perfect for testing sliders and range controls.
actions.clickAndHold(draggable): Manually starts the drag operation by clicking and holding the mouse button down on the draggable element.
.moveToElement(droppable): While still holding the mouse button, moves the pointer to the center of the drop zone.
.pause(Duration.ofMillis(500)): Pauses for 500 milliseconds before releasing. This can help with timing-sensitive drag-and-drop implementations or for visual debugging.
.release(): Releases the mouse button, completing the drag-and-drop operation at the current mouse position.
driver.quit();: Closes the browser and ends the WebDriver session.

Pro Tip

Start with dragAndDrop()

Always try dragAndDrop(source, target) first. It's the simplest approach and works for most scenarios. Only use manual clickAndHold/moveToElement/release if dragAndDrop() fails.

Ensure Elements Are Visible

Both source and target elements must be visible and within the viewport. Scroll them into view if necessary before attempting drag-and-drop operations.

Use Stable Locators

Drag-and-drop targets should have stable, unique IDs or data attributes. Avoid using complex CSS selectors or XPath expressions that might break if the page structure changes.