Advanced User Interactions | Performing drag and drop operations

//Drag and drop by pixels
builder.dragAndDropBy(element, xOffset, yOffset)
 .build()
 .perform();

//Drag one element over another element:
builder.dragAndDrop(sourceElement, targetElement).build().perform();

Let's see this in action with an example:

System.setProperty("webdriver.chrome.driver", "C:\\selenium\\chromedriver.exe");
WebDriver driver = new ChromeDriver();
driver.manage().window().maximize();
driver.get("https://www.flipkart.com/search?q=laptop");

//Find the slider element for the minimum price (left-most one)
WebElement leftSlider = driver.findElement(By.className("_3aQU3C"));

//Instantiate Actions
Actions builder = new Actions(driver);

builder.dragAndDropBy(leftSlider, 30, 0)
	.build()
	.perform();

Since we are moving the element left to right, with zero vertical movements we passed the second parameter as 0.

// Find the slider element for the maximum price (right-most one)
WebElement rightSlider = driver.findElement(By.className("_3aQU3C"));

// Drag the slider to its left by some offset (20 pixels)
builder.dragAndDropBy(rightSlider, -20, 0)
	.build()
	.perform();

Because we want the slider to be dragged right to left, instead of left to right. The negative value for x/y offset instructs the driver to drag reverse (right to left, bottom to top).

Here is the method definition:

public Actions dragAndDropBy(WebElement source,
                             int xOffset,
                             int yOffset)

A convenience method that performs click-and-hold at the location of the source element, moves by a given offset, then releases the mouse.

Parameters:

• source – element to emulate button down at.
• xOffset – horizontal move offset.
• yOffset – vertical move offset.

Returns: A self-reference.

Now let's drag one element over another:

// Find the Logo element (source to drag) and Search box element (target over which we want to drag source) 
WebElement source = driver.findElement(By.xpath("//img[@alt='Flipkart']"));
WebElement target = driver.findElement(By.className("LM6RPg"));

builder.dragAndDrop(source, target).build().perform();

Here is the method definition of dragAndDrop:

public Actions dragAndDrop(WebElement source, WebElement target)

A convenience method that performs click-and-hold at the location of the source element, moves to the location of the target element, then releases the mouse.

Parameters:

• source – element to emulate button down at.
• target – element to move to and release the mouse at.

Returns: A self reference.

Full Example

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.interactions.Actions;

public class AdvancedUserInteraction_DragAndDrop {

	public static void main(String[] args) throws InterruptedException {
		// TODO Auto-generated method stub
		System.setProperty("webdriver.chrome.driver", "C:\\selenium\\chromedriver.exe");
		WebDriver driver = new ChromeDriver();
		driver.manage().window().maximize();
		driver.get("https://www.flipkart.com/search?q=laptop");
		//Find the slider element for minimum price (left-most one)
		WebElement leftSlider = driver.findElement(By.xpath("//div[@data-reactid='108']"));
		//Instantiate Actions
		Actions builder = new Actions(driver);
		//Drag the slider to its right by some offset (30 pixels)
		builder.dragAndDropBy(leftSlider, 60, 0)
				.build()
				.perform();
		//Wait for 5 seconds
		Thread.sleep(5000);
		//Find the slider element for maximum price (right-most one)
		WebElement rightSlider = driver.findElement(By.xpath("//div[@data-reactid='110']"));
		//Drag the slider to its left by some offset (20 pixels)
		builder.dragAndDropBy(rightSlider, -30, 0)
				.build()
				.perform();
		//Wait for 5 seconds
		Thread.sleep(5000);
		//Find the Logo element (source to drag) and Search box element (target over which we want to drag source) 
		WebElement source = driver.findElement(By.xpath("//img[@alt='Flipkart']"));
		WebElement target = driver.findElement(By.className("LM6RPg"));
		//Drag logo over search box
		builder.dragAndDrop(source, target).build().perform();
		//Quit driver
		driver.quit();
	}

}