How to perform Drag Drop operation using selenium WebDriver?

Drag Drop operation can be implemented in Selenium WebDriver by using Actions class.

Using below 4 steps can explain how drag drop can be achieved using actions class.

perform Drag Drop using Actions Class using Selenium WebDriver

Step1: Create object of Actions class

Step2: Find out dragable Element.

Step3: Find out dropable Element.

Step4: Perform Drag and Drop using object of the actions class.

Syntax for drag and drop:

Actions action = new Actions(driver);
action.dragAndDrop(Sourcelocator, Destinationlocator).build().perform();

Observe below screen shot. We have one draggable element and one droppable element.

Below program illustrate drag and drop operation –

package learnAboutActionsClass;

import java.util.concurrent.TimeUnit;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.interactions.Actions;

public class DragAndDrop {

 public static void main(String[] args) {

  WebDriver driver = new FirefoxDriver();

  driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
  driver.manage().window().maximize();

  driver.navigate().to("http://jqueryui.com/resources/demos/droppable/default.html");

  WebElement draggableElement = driver.findElement(By.xpath("//*[@id='draggable']"));

  WebElement droppableElement = driver.findElement(By.xpath("//*[@id='droppable']"));

  Actions act = new Actions(driver);

  act.dragAndDrop(draggableElement, droppableElement).build().perform();

 }

}

Drag and Drop is done, refer below screenshot –