Protractor dragging but not dropping element

[Piyush Shrivastava]

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?