Basic drag/drop support in javascript capable drivers.

lib/capybara/driver/culerity_driver.rb

@@ -27,6 +27,12 @@ class Capybara::Driver::Culerity
       node.click
     end
     
+    def drag_to(element)
+      node.fire_event('mousedown')
+      element.node.fire_event('mousemove')
+      element.node.fire_event('mouseup')
+    end
+    
     def tag_name
       # FIXME: this might be the dumbest way ever of getting the tag name
       # there has to be something better...

lib/capybara/driver/selenium_driver.rb

@@ -38,6 +38,10 @@ class Capybara::Driver::Selenium
       node.click
     end
 
+    def drag_to(element)
+      node.drag_and_drop_on(element.node)
+    end
+
     def tag_name
       node.tag_name
     end

lib/capybara/node.rb

@@ -30,6 +30,10 @@ class Capybara::Node
     raise "Not implemented"
   end
   
+  def drag_to(element)
+    raise "Not implemented"
+  end
+  
   def tag_name
     raise "Not implemented"
   end

spec/drivers_spec.rb

@@ -69,4 +69,14 @@ shared_examples_for "driver with javascript support" do
       @driver.find('//p').first.text.should == 'I changed it'
     end
   end
+  
+  describe '#drag_to' do
+    it "should drag and drop an object" do
+      @driver.visit('/with_js')
+      draggable = @driver.find('//div[@id="drag"]').first
+      droppable = @driver.find('//div[@id="drop"]').first
+      draggable.drag_to(droppable)
+      @driver.find('//div[contains(., "Dropped!")]').should_not be_nil
+    end
+  end
 end

spec/views/with_js.erb

@@ -3,10 +3,18 @@
     <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
     <title>with_js</title>
     <script src="/jquery.js" type="text/javascript" charset="utf-8"></script>
+    <script src="/jquery-ui.js" type="text/javascript" charset="utf-8"></script>
     <script type="text/javascript" charset="utf-8">
     //<![CDATA[
       $(function() {
         $('#change').text('I changed it');
+        $('#drag').draggable();
+        $('#drop').droppable({
+          drop: function(event, ui) {
+            ui.draggable.remove()
+            $(this).html('Dropped!');
+          }
+        });
       });
     //]]>
     </script>
@@ -16,5 +24,11 @@
     <h1>FooBar</h1>
     
     <p id="change">This is text</p>
+    <div id="drag">
+      <p>This is a draggable element.</p>
+    </div>
+    <div id="drop">
+      <p>It should be dropped here.</p>
+    </div>
   </body>
 </html>