Need to click, hold and move at certain coordinates with capybara(ruby)

Question

Im trying to implement a click, drag and release at certain coordinates for a web page, headlessly using Capybara. The target is an element containing calendar, which responds to mouse events via ajax. Schedules are added via clicking, dragging and releasing. I have tried 2 methods:

Method 1

cal = find(:xpath, "//div[@class='dhx_cal_container']")
page.driver.browser.mouse.move_to(cal.native, 240, 250)
page.driver.browser.mouse.down
page.driver.browser.mouse.move_by(0, 150)
page.driver.browser.mouse.up

Problem with method 1: nothing is happening according to screenshots.

Method 2

driver.browser.action.move_to(native).move_by(x1, y1).click_and_hold.perform
driver.browser.action.move_to(native).move_by(x2, y2).release.perform

Problem with method 2: click_and_hold always targets the center of the element.

Any ideas how to implement the click and drag in this case?

Answer 1

You should use capybara's drag_to method

source = page.find('#foo')
target = page.find('#bar')
source.drag_to(target)

More info: http://www.rubydoc.info/github/jnicklas/capybara/Capybara%2FNode%2FElement%3Adrag_to