How can I get around my mouse pointer that has to be on the browser

Question

I have the following code

var dragUserTask = element(by.repeater("item in getItms(slctCat)").row(0));

    browser.actions()
        .mouseMove(dragUserTask)
        .mouseDown()
        .mouseMove({ x: 400, y: 400 })
        .mouseUp()


        .perform().then(function () {

Now If I run the test my mouse pointer has to be on the screen and the "Drag and drop" only drops where my pointer is on the screen. It does not drop on .mouseMove({ x: 400, y: 400 }) Can I rather try .dragAndDrop and if yes how exactly does it work, I was struggeling I used this code:

 browser.actions()
        .dragAndDrop(dragUserTask,{ x: 400, y: 400 })
        .perform().then(function () {

But my drop is still where my mouse pointer is on the screen