The dragAndDrop() method is similar to the dragAndDropBy() method. The only difference being that, instead of moving the WebElement by an offset, we move it on to a target element.

The API syntax for the dragAndDrop() method is as follows:

public Actions dragAndDrop(WebElement source, WebElement target)

The input parameters for the preceding method are the WebElement source and the WebElement target, while the return type is the Actions class.

Let's see a working code example for it. Open the DragAndDrop.html file, which is provided with the book, with two square boxes, as shown in this screenshot:

Here, we can actually drag the Drag me to my target rectangle to the Drop here rectangle. Try that. Let's see how that can be achieved, using WebDriver:

@Test
public void shouldDragAndDrop() {

    driver.get("http://guidebook.seleniumacademy.com/DragAndDrop.html");

    WebElement src = driver.findElement(By.id("draggable"));
    WebElement trgt = driver.findElement(By.id("droppable"));
    Actions actions = new Actions(driver);
    actions.dragAndDrop(src, trgt).perform();
}

In the preceding code, the source and target WebElements are identified by their IDs, and the dragAndDrop() method is used to drag one to the other. Here, out of the script with first square box dropped on the second box shown in the following screenshot: