How to perform drag and drop on HTML 5 in Protractor

Question

I am trying to perform a drag and drop action in an angular app with HTML 5 canvas. The method dragAndDrop in protractor doesn't work on it . Although it works on jQuery Draggable interface.

I tried doing it in by calculating window size but it still doesn't work

var w = 0;
var h = 0;
browser.executeScript(function () {
    var width = $(window).width();
    var height = $(window).height();
    return { width: width, height: height };
}).then(function (size) {

    w = size.width;
    h = size.height;
    console.log('***1**** width + height *********' + w + ' + ' + h);
    browser.wait(protractor.ExpectedConditions.invisibilityOf(element(by.className('bodyLoader'))), sync.maxTimeToLook);
    var control = element(by.xpath(labelLocator));
    browser.actions().dragAndDrop(
        control, { x:w/2, y: h/2 }
    ).perform();
});

I searched around and found this issue https://github.com/SeleniumHQ/selenium-google-code-issue-archive/issues/3604

I've tried many solutions and many helper functions like:

https://gist.github.com/SirLenz0rlot/cc5baa5a73f188f62f6f
https://gist.github.com/druska/624501b7209a74040175

There is currently an issue posted here.

Answer 1

Quoting one solution from Omland from https://github.com/angular/protractor/issues/123

browser.actions().mouseDown(el).perform(); browser.actions().mouseMove({x:0, y:100}).perform(); browser.actions().mouseDown(el).perform(); browser.actions().mouseMove({x:0, y:75}).perform(); browser.actions().mouseUp().perform();