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

public class Playground
{
    public static void main(String[] args)
    {
        WebDriver driver = new ChromeDriver();
        driver.get("https://smnbbrv.github.io/angular-sortablejs-demo/multiple-lists");

        WebElement draggable = driver.findElement(By.xpath("/html/body/app-root/div/app-multiple-lists/div[1]/div[1]/ul/li[2]"));
        WebElement dropable = driver.findElement(By.xpath("/html/body/app-root/div/app-multiple-lists/div[1]/div[2]"));

        // DRAW BORDERS AROUND TO MAKE SURE WE SELECT CORRECT OBJECTS
        drawBorder(driver, "/html/body/app-root/div/app-multiple-lists/div[1]/div[1]/ul/li[2]");
        drawBorder(driver, "/html/body/app-root/div/app-multiple-lists/div[1]/div[2]");

        // TRY USING SELENIUMS ACTION CLASS
        Actions actions = new Actions(driver);
        actions.clickAndHold(draggable).moveToElement(dropable).release().build().perform();

        // TRY AGAIN USING JAVA SCRIPT
        dragAndDrop(driver, draggable, dropable);
    }

    public static void drawBorder(WebDriver driver, String xpath)
    {
        WebElement element_node = driver.findElement(By.xpath(xpath));
        JavascriptExecutor jse = (JavascriptExecutor) driver;
        jse.executeScript("arguments[0].style.border='3px solid red'", element_node);
    }

    public static void dragAndDrop(WebDriver driver, 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);
    }
}