How to simulate a drag and drop action in protractor?

elem = Element you want to move;

target = Element where you want to drop elem;

For WebdriverJS:-

browser.driver.actions().dragAndDrop(elem,target).mouseUp().perform();

For Protractor:-

browser.actions().dragAndDrop(elem,target).mouseUp().perform();

        var plot0 = ptor.element(protractor.By.id(''));

        ptor.driver.actions()

        .dragAndDrop(plot0, {x: 200, y: 100})

        .mouseMove(plot0, {x: 200, y: 100}) // 200px from left, 200 px from top of plot0

        .mouseDown()

        .mouseMove({x: 600, y: 0}) // 600px to the right of current location

        .perform();

This works for me guys. My scenario is drag a pop up dialog box which does not have a target element.

Ok playing around I found that I there are better ways. probably the sources I was looking before were outdated. The following script will do the trick very clean and easy...

it( 'step : 6 : select star rating min === 1 and max === 2' , function (done) {

    driver.actions()
        .mouseDown(element(by.css('.filter-editorial-rating .ngrs-handle-max')))
        .mouseMove(element(by.css('.filter-editorial-rating .step-2')))
        .mouseUp()
        .perform();


element( by.css( '.results-indicator' ) ).getText()
    .then( function ( text ) {
        resultsB = parseInt (text.split(" ")[0]);
        expect( resultsB ).toBeLessThan( resultsA );                            
        done();
    });
});

you can get driver like this ...

browser.get(url);
var driver = browser.driver;

Cheers

This is quite straightforward nowadays:

browser.actions().dragAndDrop(elem, target).perform();

---

Where dragAndDrop behind the scenes is mouseDown + mouseMove + mouseUp:

/**
 * Convenience function for performing a "drag and drop" manuever. The target
 * element may be moved to the location of another element, or by an offset (in
 * pixels).
 * @param {!webdriver.WebElement} element The element to drag.
 * @param {(!webdriver.WebElement|{x: number, y: number})} location The
 *     location to drag to, either as another WebElement or an offset in pixels.
 * @return {!webdriver.ActionSequence} A self reference.
 */
webdriver.ActionSequence.prototype.dragAndDrop = function(element, location) {
  return this.mouseDown(element).mouseMove(location).mouseUp();
};