Protractor dragAndDrop by offset Location of Element

Question

Question: Is there a way that I can offset the starting location to drag?

I would like to edit the location of where to start the dragging process. Testing on another element that I can grab without adjustment the below code works fine:

var controlPoint = $$('circle.points').first();
browser.actions().
        dragAndDrop(controlPoint.getLocation(), {x: 500, y: 50}).
        perform();

However when I try to set it up for modifying the location like this:

var controlPoint = $$('circle.points').first();
controlPoint.getLocation().then(function (loc) { 
    // would modify loc.x and loc.y here if this didn't give an error
    browser.actions().
        dragAndDrop(loc, {x: 500, y: 50}).
        perform();
});

I get the following error:

Failures:

  1) Single Segments should test dragging and dropping of control points
   Message:
     UnknownError: unknown error: at least an element or offset should be set
  (Session info: chrome=36.0.1985.125)
  (Driver info: chromedriver=2.10.267517,platform=Mac OS X 10.9.4 x86_64)
   Stacktrace:
     UnknownError: unknown error: at least an element or offset should be set
  (Session info: chrome=36.0.1985.125)
  (Driver info: chromedriver=2.10.267517,platform=Mac OS X 10.9.4 x86_64)
==== async task ====
mouseMove
    at Array.forEach (native)
==== async task ====
ActionSequence.perform
    at /Users/willko/Desktop/e2e_sketching/specs/sketch2.js:25:6
==== async task ====

Answer 1

The problem is in dragAndDrop(loc because dragAndDrop() takes an ElementFinder or WebElement as first argument and you're passing loc which is an Object with x and y properties.

Try this:

browser.actions().
    dragAndDrop(controlPoint, {x: 500, y: 50}).
    perform();

Answer 2

Is it possible to parameterize the second parameter or offset to dragAndDrop? Drag and drop works with hardcoded offset object like here described {x: 500, y: 50} but treats {x:x, y:y}, at least for me, as undefined (in ActionSequence.mouseMove function).