Protractor. DragAndDrop doesn't work

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();