drag-and-drop - Protractor 。拖放不起作用

Question

DragAndDrop 对我不起作用。我尝试移动列表项，它移动了一点，但仍然在同一个位置。 当我移动元素时，会创建一个新的列表项，请查看图像。 你有什么想法吗？ 这是我的代码:

var dragElement = element(by.id("i3"));
var dropElement = element(by.id("i1"));
browser.actions().dragAndDrop(dragElement, dropElement).perform();

这是我的页面:

<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

您可以尝试下面的代码并检查它是否有效，

browser.actions().mouseMove(dragElement).mouseDown().mouseMove(dropElement).mouseUp().perform();