我在 Mac 上使用 cucumber/capybara/selenium/firefox。除了 d&d 之外，一切都很好。可通过
drag_node.drag_to(drop_node)现在我发现这个示例应用程序（由显然有类似问题的人编写）证明了这个问题，而不是复制粘贴点点滴滴。
Google 然而并不知道
drag_to()对我来说，
#drag_to为了将 UI 可排序表行向下移动，我必须创建一个包含三行的表，然后运行此代码（在 Cucumber 步骤中）：
element = find('tbody tr:nth-child(1)')
target = find('tbody tr:nth-child(3)')
element.drag_to target
这将交换第一行和第二行。我的解释是 Capybara 拖得不够远，所以我给了它一个超出我实际目标的目标。
注意：我已经使用
tolerance: 'pointer我遇到了同样的问题并通过直接转到 selenium-webdriver 解决了它。
我正在使用 selenium-webdriver 2.20.0 和 Capybara 1.1.2
这适用于此 HTML
<!DOCTYPE html>
<html>
<head>
<title>Cabybara Drag And Drop</title>
</style>
<style type="text/css" media="screen">
#list_1 { background:#2C4999; }
#list_2 { background:#99752A; }
.list { padding:10px; width:200px; }
.item { background:#FFF; margin:10px; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<script type="text/javascript">
$().ready(function(){
$( "#list_1" ).sortable({ connectWith:"#list_2" });
$( "#list_2" ).sortable({ connectWith:"#list_1" });
});
</script>
</head>
<body>
<ol id='list_1' class='list'>
<li id='item_1' class='item'>Item 1</li>
<li id='item_2' class='item'>Item 2</li>
<li id='item_3' class='item'>Item 3</li>
<li id='item_4' class='item'>Item 4</li>
<li id='item_5' class='item'>Item 5</li>
</ol>
<ol id='list_2' class='list'>
<li id='item_6' class='item'>Item 6</li>
<li id='item_7' class='item'>Item 7</li>
<li id='item_8' class='item'>Item 8</li>
<li id='item_9' class='item'>Item 9</li>
<li id='item_10' class='item'>Item 10</li>
</ol>
</body>
</html>
现在开始 Ruby 代码。 从水豚调用 page.driver.browser 获取 selenium-webdriver
require 'test_helper'
class DragDropTest < ActionDispatch::IntegrationTest
setup do
Capybara.current_driver = Capybara.javascript_driver # :selenium by default
end
def test_drag_item_1_to_list_2
visit '/drag_drop'
element = page.find(:id, 'item_1')
target = page.find(:id, 'list_2')
selenium_webdriver = page.driver.browser
selenium_webdriver.mouse.down(element.native)
selenium_webdriver.mouse.move_to(target.native, 0, 10)
selenium_webdriver.mouse.up
sleep 2
end
end
这是 selenium-webdriver 对可排序列表有问题。这篇文章涵盖了解决方法：http://www.dixis.com/?p=626
#drag_to#drag_by另见：
这对我有用：
def drag_n_drop(item:, location:)
# this is from Selenium
page.driver.browser.action.click_and_hold(item.native).perform
# this is from Capybara
item.drag_to(location)
end
背景：
警告：我通过反复试验发现了这一点，实际上我不确定它为什么有效。 YMMV，使用风险自负。