Selenium Drag and drop not working with Action methods, Is there any alterative

Question

1. Drag and Drop Selenium

   WebElement source = driver.findElement(By.cssSelector(locator1));
   WebElement target = driver.findElement(By.cssSelector(locator2));
   Actions act = new Actions(driver);
   

(Option1)

     act.moveToElement(source) .pause(Duration.ofSeconds(1)) .clickAndHold(source)
      .pause(Duration.ofSeconds(1)) .moveByOffset(1, 0) .moveToElement(target)
     .moveByOffset(1, 0) .pause(Duration.ofSeconds(1)) .release().perform();
      System.out.println();

2. Option2

   act.clickAndHold(source).pause(2000) .moveToElement(target) .release().build().perform();

I have tried with both option , I am working on Selenium 3, Is there any other way to achieve it.

Note: Robot Class not recommended

Answer 1

This is drag and drop functionality using Actions

public void dragAndDrop(WebElement from, WebElement to) {
        Actions action = new Actions(driver);
        action.dragAndDrop(from,to).perform();
    }

This is using JSExecutor:

public void dragAndDrop(WebElement from, WebElement to) {
        JavascriptExecutor js = (JavascriptExecutor)driver;
        js.executeScript("function createEvent(typeOfEvent) {\n" + "var event =document.createEvent(\"CustomEvent\");\n"
                        + "event.initCustomEvent(typeOfEvent,true, true, null);\n" + "event.dataTransfer = {\n" + "data: {},\n"
                        + "setData: function (key, value) {\n" + "this.data[key] = value;\n" + "},\n"
                        + "getData: function (key) {\n" + "return this.data[key];\n" + "}\n" + "};\n" + "return event;\n"
                        + "}\n" + "\n" + "function dispatchEvent(element, event,transferData) {\n"
                        + "if (transferData !== undefined) {\n" + "event.dataTransfer = transferData;\n" + "}\n"
                        + "if (element.dispatchEvent) {\n" + "element.dispatchEvent(event);\n"
                        + "} else if (element.fireEvent) {\n" + "element.fireEvent(\"on\" + event.type, event);\n" + "}\n"
                        + "}\n" + "\n" + "function simulateHTML5DragAndDrop(element, destination) {\n"
                        + "var dragStartEvent =createEvent('dragstart');\n" + "dispatchEvent(element, dragStartEvent);\n"
                        + "var dropEvent = createEvent('drop');\n"
                        + "dispatchEvent(destination, dropEvent,dragStartEvent.dataTransfer);\n"
                        + "var dragEndEvent = createEvent('dragend');\n"
                        + "dispatchEvent(element, dragEndEvent,dropEvent.dataTransfer);\n" + "}\n" + "\n"
                        + "var source = arguments[0];\n" + "var destination = arguments[1];\n"
                        + "simulateHTML5DragAndDrop(source,destination);", from, to);
    }
    

UPDATE:

        WebElement a = driver.findElement(By.cssSelector("a:nth-child(1)"));
        WebElement b = driver.findElement(By.cssSelector("a:nth-child(2)"));

        int x = b.getLocation().x;
        int y = b.getLocation().y;

        Actions actions = new Actions(driver);
        actions.moveToElement(a)
                .pause(Duration.ofSeconds(1))
                .clickAndHold(a)
                .pause(Duration.ofSeconds(1))
                .moveByOffset(x, y)
                .moveToElement(b)
                .moveByOffset(x,y)
                .pause(Duration.ofSeconds(1))
                .release().build().perform();