Protractor dragging but not dropping element

Question

I am using Protractor for testing my AngularJS application which involves dragging an element and dropping it on a svg. I am able to click and drag the element over the svg.

browser.actions()
    .mouseMove(draggableElement)
    .mouseDown()
    .mouseMove({x: 400, y: 100}) //Reaches the svg
    .perform();
browser.sleep(1000);
browser.actions().mouseUp().perform();

As you can notice, after the element is dragged on the svg, I have put a sleep. I am able to see the draggable element at the desired position at this point, but it does not get dropped. The element disappears suddenly and nothing happens.

What is going wrong? Is there a working way in Protractor to correctly drag and drop elements?

Answer 1

I believe you have to pass the draggableEelement also as parameter to mouseDown() and mouseUp() :

browser.actions()
  .mouseMove(draggableEelement)
  .mouseDown(draggableEelement)
  .mouseMove({x: 400, y: 100})
  .perform();
browser.sleep(1000);
browser.actions().mouseUp(draggableEelement).perform();