Perform Drag and Drop of Elements using Selenium Webdriver

In this post, i will give a simple example of script which will perform drag and drop operation of elements

Lets take an example of the site ‘http://jqueryui.com/droppable’
Here we can see 2 elements. One is draggable which is called the Source element. It will be dragged from one location and dropped in another location which is called Target.

There are different ways to write the script for drag and drop. I will describe few ways i have tried.

1st way:
act.dragAndDrop(Source, Target).build().perform();

2nd way:
act.clickAndHold(From).build().perform();
act.moveToElement(To).build().perform();
act.release(To).build().perform();

3rd way:
act.dragAndDropBy(Source, xoffset, yoffset).perform();

Write the following code into Eclipse IDE and then run the script.

package JqueryPackage;
import java.io.IOException;
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 JqueryElements {

    public static void main(String[] args) {

    WebDriver driver = new FirefoxDriver();
    driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
    driver.get(“http://jqueryui.com/droppable/#default”);
    driver.manage().window().maximize();

    Actions act = new Actions(driver);

    // Script for dragging an element and dropping it in another place
    WebElement iFrame = driver.findElement(By.tagName(“iframe”));
    System.out.println(iFrame.getSize());
    driver.switchTo().frame(iFrame);

    WebElement From = driver.findElement(By.id(“draggable”));
    System.out.println(From.getLocation());

    WebElement To = driver.findElement(By.id(“droppable”));
    System.out.println(To.getLocation());

    act.dragAndDrop(From, To).build().perform();

    }
}

We can replace the last line by any one of the following codes to perform the drag and drop.

act.clickAndHold(From).build().perform();
act.moveToElement(To).build().perform();
act.release(To).build().perform();

OR

act.dragAndDropBy(From, 140, 18).perform();

Here 140 and 8 are the x and y offset of the target element.
We can find the location of the element by using the getLocation() method

Hope this will help 🙂