Drag & Drop With Protractor By Repeater

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 it

Solution 1:

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

Solution 2:

Use .dragAndDrop method

var moveIndexToIndex = function (startIndex, endIndex) { 
  returngetField(endIndex).then(function (endPoint) {
      getField(startIndex).then(function (startPoint) { 
          // browser.actions().dragAndDrop(startPoint, endPoint).perform(); // doesn't work either
          browser.actions().
            dragAndDrop(startPoint, {x: (startIndex - endIndex) * 400, y: 0}).
            perform(); 
      });
    });
});

I'm not sure how you're going to calculate x and y. But this is how you usually do it.

As a side note, use $ instead of findElement. It's being deprecated.

Solution 3:

I had this same issue. The solution for me was to follow the advice in the Selenium issue here: https://code.google.com/p/selenium/issues/detail?id=3604#c20

Starting with the example from @willko747, here was my solution:

browser.actions()
    .mouseMove(startPoint.getWebElement(), {x: 0, y: 0})
    .mouseDown()
    .mouseMove(startPoint.getWebElement(), {x: 5, y: 5}) // Initial move to trigger drag start.mouseMove(endPoint.getWebElement())
    .mouseUp()
    .perform(); 

I think this also solves this issue

Solution 4:

elementToDrag.click();
browser.actions().dragAndDrop(elementToDrag, locationToDragTo))).perform();

Solution 5:

None of the solutions mentioned above worked for me. I could see the element (to be dragged) getting selected and the mouse cursor changing to a 4-way scroll arrow. However, the drag was not happening. What worked for me is the solution I found in GitHub: https://gist.github.com/druska/624501b7209a74040175 Download the file: "native_js_drag_and_drop_helper.js" I am sharing the code for "native_js_drag_and_drop_helper.js".

module.exports =functionsimulateDragDrop(sourceNode, destinationNode) {
    varEVENT_TYPES = {
        DRAG_END: 'dragend',
        DRAG_START: 'dragstart',
        DROP: 'drop'
    }

    functioncreateCustomEvent(type) {
        var event = newCustomEvent("CustomEvent")
        event.initCustomEvent(type, true, true, null)
        event.dataTransfer = {
            data: {
            },
            setData: function(type, val) {
                this.data[type] = val
            },
            getData: function(type) {
                returnthis.data[type]
            }
        }
        return event
    }

    functiondispatchEvent(node, type, event) {
        if (node.dispatchEvent) {
            return node.dispatchEvent(event)
        }
        if (node.fireEvent) {
            return node.fireEvent("on" + type, event)
        }
    }

    var event = createCustomEvent(EVENT_TYPES.DRAG_START)
    dispatchEvent(sourceNode, EVENT_TYPES.DRAG_START, event)

    var dropEvent = createCustomEvent(EVENT_TYPES.DROP)
    dropEvent.dataTransfer = event.dataTransferdispatchEvent(destinationNode, EVENT_TYPES.DROP, dropEvent)

    var dragEndEvent = createCustomEvent(EVENT_TYPES.DRAG_END)
    dragEndEvent.dataTransfer = event.dataTransferdispatchEvent(sourceNode, EVENT_TYPES.DRAG_END, dragEndEvent)
}

Implementation of this Drag-and-Drop function:

var dragAndDropFn = require("./../../../TestScripts/CommonFunctions/native_js_drag_and_drop_helper.js");
var inputX = element(by.xpath("XPATH OF ELEMENT TO BE MOVED"));
var targetX = element(by.xpath("XPATH OF THE TARGET LOCATION"));
browser.executeScript(dragAndDropFn, inputX.getWebElement(), targetX.getWebElement());