Protractor. DragAndDrop doesn't work - drag-and-drop

Question

DragAndDrop doesn't work for me. I try to move item of list and it moves a little bit, but still at the same place.
When I move element a new item of list is creates, look at the image.
Have you any ideas?
Here is my code:
var dragElement = element(by.id("i3"));
var dropElement = element(by.id("i1"));
browser.actions().dragAndDrop(dragElement, dropElement).perform();
And here is my page:
<ol ui-tree-nodes="" ng-model="$ctrl.items" class="list-group canSorting ng-pristine ng-untouched ng-valid ng-scope angular-ui-tree-nodes ng-not-empty">
<!-- ngRepeat: item in $ctrl.items --><li collapsed="true" ng-repeat="item in $ctrl.items" ui-tree-node="" class="list-group-item p0 ng-scope angular-ui-tree-node">
<table width="100%">
<tbody><tr>
<td style="vertical-align: middle !important;" class="text-center p0" width="1">
<i id="i0" class="btn btn-sm glyphicon glyphicon-resize-vertical angular-ui-tree-handle ng-scope" ui-tree-handle=""></i>
</td>
<td class="ng-binding" style="border-left: 1px solid #ccc; padding-left: 6px;">
Раздел 1
</td>
</tr>
</tbody></table>
</li><!-- end ngRepeat: item in $ctrl.items --><li style="" collapsed="true" ng-repeat="item in $ctrl.items" ui-tree-node="" class="list-group-item p0 ng-scope angular-ui-tree-node">
<table width="100%">
<tbody><tr>
<td style="vertical-align: middle !important;" class="text-center p0" width="1">
<i id="i1" class="btn btn-sm glyphicon glyphicon-resize-vertical angular-ui-tree-handle ng-scope" ui-tree-handle=""></i>
</td>
<td class="ng-binding" style="border-left: 1px solid #ccc; padding-left: 6px;">
Раздел 2
</td>
</tr>
</tbody></table>
</li><!-- end ngRepeat: item in $ctrl.items --><li style="" collapsed="true" ng-repeat="item in $ctrl.items" ui-tree-node="" class="list-group-item p0 ng-scope angular-ui-tree-node">
<table width="100%">
<tbody><tr>
<td style="vertical-align: middle !important;" class="text-center p0" width="1">
<i id="i2" class="btn btn-sm glyphicon glyphicon-resize-vertical angular-ui-tree-handle ng-scope" ui-tree-handle=""></i>
</td>
<td class="ng-binding" style="border-left: 1px solid #ccc; padding-left: 6px;">
Раздел c пройденным тестом
</td>
</tr>
</tbody></table>
</li><!-- end ngRepeat: item in $ctrl.items --><li style="" collapsed="true" ng-repeat="item in $ctrl.items" ui-tree-node="" class="list-group-item p0 ng-scope angular-ui-tree-node">
<table width="100%">
<tbody><tr>
<td style="vertical-align: middle !important;" class="text-center p0" width="1">
<i id="i3" class="btn btn-sm glyphicon glyphicon-resize-vertical angular-ui-tree-handle ng-scope" ui-tree-handle=""></i>
</td>
<td class="ng-binding" style="border-left: 1px solid #ccc; padding-left: 6px;">
Раздел 3
</td>
</tr>
</tbody></table>
</li><!-- end ngRepeat: item in $ctrl.items -->
</ol>
screenshot

Answer 1

can you try the below code and check whether it works,
browser.actions().mouseMove(dragElement).mouseDown().mouseMove(dropElement).mouseUp().perform();