Drag & drop hierarchical list using selenium webdriver in java

2
votes

Drag & drop hierarchical list using selenium webdriver in java

Github link: https://github.com/dbushell/Nestable

Demo link:- http://dbushell.github.io/Nestable/

I want to drag and drop hierarchical list using selenium webdriver in java . See demo link for more details.

i tried the following things:-

  1. Get the source element
  2. Create a div with class=dd-placeholder
  3. Drag the source element and drop on the newly created div element

Error:- Not able drop the source element on newly created div element.

How can i do it. Is it possible using selenium webdriver.

Note: See demo link
2
javaselenium-webdriverdrag-and-drop
isn't dragAndDrop working where source will be div element and target will be li tag? – Vivek Singh
@VivekSingh See demo correctly.At first div[class='dd-placeholder'] will be created before drop and after drop only, it creates li tag. – Galet
if am getting it right u need (for eg.) move item 6 to item 1? Is it so? – Vivek Singh
@VivekSingh I need to move element. How can i drop the source element to newly created div with class=dd-placeholder – Galet
Since the div element u r moving to is contained in a li element. Give the target as li not div. I tried it out (if moving item 6 to item 1) -- source = driver.findElement(By.xpath("//div[.='Item 6']")); target= driver.findElement(By.xpath("//li[@data-id='1']")); – Vivek Singh

2 Answers

0
votes

I found drag and drop functionality to be a little different depending on which browser you use, and I had to add an offset to the drop location to get it to work in Chrome Firefox and IE consistently.

This is a C# snippet, but java should be similar. The target in this instance is a placeholder div that I inserted with JS, just like your approach

Actions act = new Actions(WebDriver);
act.ClickAndHold(source);
act.MoveToElement(target);
act.MoveByOffset(0, 5); //Minimum 1 pixel offset for Chrome, 5 for IE 
act.Release(source);
act.Build().Perform();
0
votes

This method drags and drops a webelement from a location to another using Javascript. Don't get bogged down with its javascript :). Just use the method by providing from and to parameters. Good luck!

public void dragAndDrop(WebElement from, WebElement to) {
    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);

}