How to simulate a drag and drop action in protractor?

Question

I have a double slider and I'd like to test that it's operable and return's the right data. The slider has a min and a max handler, it also has some "breakpoints that I can hook to. "

What I want to simulate is

• a touchStart of the ".handler-max" element
• a move of the thumb over the element with class ".step-3"
• a touchEnd of the ".handler-max" element

while I found how to trigger a touchStart and a touchEnd event. I'm clueless on how to simulate the move of the thumb

browser.executeScript('angular.element(arguments[0]).triggerHandler("touchstart");', filterHandler);
// <--- move event????
browser.executeScript('angular.element(arguments[0]).triggerHandler("touchend");', filterHandler);

P.S. The scope of this question is an integration test that tests if what happens to the application when a user interact's with a double slider directive is the desirable result.

Answer 1

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