拖动&通过中继器使用量角器掉落

Drag amp; Drop with Protractor by Repeater(拖动amp;通过中继器使用量角器掉落)
本文介绍了拖动&通过中继器使用量角器掉落的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

问题描述

有几个类似的问题&我已经阅读了所有内容.但是我仍然无法让动作序列在量角器中按预期工作.

There are a few questions similar to this one & and I have read them all. However I still can't get the Action Sequence to work as expected in protractor.

我有一个可拖动的项目列表,我需要在重新排列后测试结果.但是我无法让拖放正常工作.这是我目前所拥有的简化模型.

I have a list of items that are draggable and I need to test results after they are re-arranged. However I can't get the dragging/dropping to work correctly. Here is a simplified mock up of what I have so far.

辅助函数:

var getRow = function (num){
      return element(by.repeater('p in pList').row(num - 1));
};

var getField = function (rowNum){
    return getRow(rowNum).findElement(by.css('td.ng-binding'));
};

var moveIndexToIndex = function (startIndex, endIndex) { 
  return getField(endIndex).then(function (endPoint) {
      getField(startIndex).then(function (startPoint) { 
          // browser.actions().dragAndDrop(startPoint, endPoint).perform(); // doesn't work either
          browser.actions().
            mouseMove(startPoint, {x: 0, y: 0}).
            mouseDown().
            mouseMove(endPoint).
            mouseUp().
            perform();   
      });
    });
});

我使用如下文字调用移动辅助函数:

I am calling the move helper function with literals like so:

moveIndexToIndex(2, 5);

html 看起来像这样:

And the html look something like this:

<tbody>
          <!-- ngRepeat: p in pList -->
          <tr ng-repeat="p in pList" eg-draggable="p" eg-droppable="eg-droppable" class="ng-scope" draggable="true" style="cursor: move;">
            <td class="ng-binding">DummyValue 1</td>
          </tr><!-- end ngRepeat: p in pList --><tr ng-repeat="p in pList" eg-draggable="p" eg-droppable="eg-droppable" class="ng-scope" draggable="true" style="cursor: move;">
            <td class="ng-binding">DummyValue 2</td>
          </tr><!-- end ngRepeat: p in pList --><tr ng-repeat="p in pList" eg-draggable="p" eg-droppable="eg-droppable" class="ng-scope" draggable="true" style="cursor: move;">
            <td class="ng-binding">DummyValue 3</td>
          </tr><!-- end ngRepeat: p in pList --><tr ng-repeat="p in pList" eg-draggable="p" eg-droppable="eg-droppable" class="ng-scope" draggable="true" style="cursor: move;">
            <td class="ng-binding">DummyValue 4</td>
          </tr><!-- end ngRepeat: p in pList --><tr ng-repeat="p in pList" eg-draggable="p" eg-droppable="eg-droppable" class="ng-scope" draggable="true" style="cursor: move;">
            <td class="ng-binding">DummyValue 5</td>
          </tr><!-- end ngRepeat: p in pList --><tr ng-repeat="p in pList" eg-draggable="p" eg-droppable="eg-droppable" class="ng-scope" draggable="true" style="cursor: move;">
            <td class="ng-binding">DummyValue 6</td>
          </tr><!-- end ngRepeat: p in pList --><tr ng-repeat="p in pList" eg-draggable="p" eg-droppable="eg-droppable" class="ng-scope" draggable="true" style="cursor: move;">
            <td class="ng-binding">DummyValue 7</td>
          </tr><!-- end ngRepeat: p in pList --><tr ng-repeat="p in pList" eg-draggable="p" eg-droppable="eg-droppable" class="ng-scope" draggable="true" style="cursor: move;">
            <td class="ng-binding">DummyValue 8</td>
          </tr><!-- end ngRepeat: p in pList --><tr ng-repeat="p in pList" eg-draggable="p" eg-droppable="eg-droppable" class="ng-scope" draggable="true" style="cursor: move;">
            <td class="ng-binding">DummyValue 9</td>
          </tr><!-- end ngRepeat: p in pList --><tr ng-repeat="p in pList" eg-draggable="p" eg-droppable="eg-droppable" class="ng-scope" draggable="true" style="cursor: move;">
            <td class="ng-binding">DummyValue 10</td>
          </tr>
          <!-- end ngRepeat: p in pList -->
</tbody>

我怎样才能让拖放工作?我做错了吗?

How can I get dragging and dropping to work? Am I doing something wrong?

推荐答案

通过对量角器的更新更改修复了这个问题.我错过了替换 .find() 方法的 .getWebElement() 部分.

Fixed this with the updated changes to protractor. I was missing the .getWebElement() part which replaced the .find() method.

browser.actions().
        mouseMove(startPoint.getWebElement(), {x: 0, y: 0}).
        mouseDown().
        mouseMove(endPoint.getWebElement()).
        mouseUp().
        perform(); 

这篇关于拖动&amp;通过中继器使用量角器掉落的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益,请联系我们,我们会在确认后第一时间进行删除!

相关文档推荐

Getting the position of the element in a list when it#39;s drag/dropped (ui.sortable)(拖放时获取元素在列表中的位置(ui.sortable))
Detecting HTML5 Drag And Drop support in javascript(在 javascript 中检测 HTML5 拖放支持)
HTML5 drop event doesn#39;t work unless dragover is handled(除非处理了拖动,否则 HTML5 放置事件不起作用)
How to use jQuery#39;s drop event to upload files dragged from the desktop?(如何使用 jQuery 的 drop 事件上传从桌面拖动的文件?)
Drop image into contenteditable in Chrome to the cursor(将图像拖放到 Chrome 中的 contenteditable 到光标处)
HTML5: dragover(), drop(): how get current x,y coordinates?(HTML5: dragover(), drop(): 如何获取当前 x,y 坐标?)