Unable to Automate Drag and Drop for IE11 : Selenium WebDriver

Question

I am trying to automate drag and drop functionality in IE11 using Selenium Web Driver in Java. I am somehow able to achieve it on Chrome, but it's not happening in IE.

Before further explanation here is how I'm dragging and dropping:

Actions builder = new Actions(driver);
builder.clickAndHold(sourceElement)
 .moveToElement(targetElement)
 .release(targetElement)
 .build().perform();

In IE: Instead of dragging and dropping it selects all the text from source to destination element. I thought this might be because it's pickup up the wrong element and tried the operation with some relevant parent and child elements but didn't work.

In Chrome: Works damn smooth.

In Firefox: Just performs click on holds and while dragging throws, element no longer attached to DOM exception . This might be because, I am dragging a row from a grid (kendo grid) and since dragging a row from a grid is not possible our devs have implemented it in such a way that when you drag a row a new dynamic element is created which moves along.

Just to add on more details:

1. I have already tried dragAndDrop() and other Javacript options.
2. I'm using the latest version of selenium and updated IE.
3. Our grid uses HTML5 components and I've discovered that there are few issues already there (not sure about what all issues though), but still since my scenario was working in one browser I hope this is not one of those issues.
4. I have made it possible somehow using Robot class but it is too unreliable and behaves weird, I would prefer giving up than using it.

Any help will be appreciated!

Answer 1

One solution if it's an HTML5 drag and drop is to simulate it with some javascript. Here is a working example that drops an item to a bin:

final String JS_DnD =
"var src=arguments[0],tgt=arguments[1];var dataTransfer={dropEffe" +
"ct:'',effectAllowed:'all',files:[],items:{},types:[],setData:fun" +
"ction(format,data){this.items[format]=data;this.types.append(for" +
"mat);},getData:function(format){return this.items[format];},clea" +
"rData:function(format){}};var emit=function(event,target){var ev" +
"t=document.createEvent('Event');evt.initEvent(event,true,false);" +
"evt.dataTransfer=dataTransfer;target.dispatchEvent(evt);};emit('" +
"dragstart',src);emit('dragenter',tgt);emit('dragover',tgt);emit(" +
"'drop',tgt);emit('dragend',src);";

WebDriver driver = new InternetExplorerDriver();
driver.get("http://html5demos.com/drag");

WebElement ele_source = driver.findElement(By.id("two"));
WebElement ele_target = driver.findElement(By.id("bin"));

// drag and drop item two into the bin
((JavascriptExecutor)driver).executeScript(JS_DnD, ele_source, ele_target);