diff --git a/lib/capybara/selenium/extensions/html5_drag.rb b/lib/capybara/selenium/extensions/html5_drag.rb
index 9b7e8fea..7aeade4b 100644
--- a/lib/capybara/selenium/extensions/html5_drag.rb
+++ b/lib/capybara/selenium/extensions/html5_drag.rb
@@ -160,6 +160,14 @@ class Capybara::Selenium::Node
         var targetRect = target.getBoundingClientRect();
         var sourceCenter = rectCenter(source.getBoundingClientRect());
 
+        for (var i = 0; i < drop_modifier_keys.length; i++) {
+          key = drop_modifier_keys[i];
+          if (key == "control"){
+            key = "ctrl"
+          }
+          opts[key + 'Key'] = true;
+        }
+
         // fire 2 dragover events to simulate dragging with a direction
         var entryPoint = pointOnRect(sourceCenter, targetRect)
         var dragOverOpts = Object.assign({clientX: entryPoint.x, clientY: entryPoint.y}, opts);
@@ -198,14 +206,6 @@ class Capybara::Selenium::Node
       var dt = new DataTransfer();
       var opts = { cancelable: true, bubbles: true, dataTransfer: dt };
 
-      for (var i = 0; i < drop_modifier_keys.length; i++) {
-        key = drop_modifier_keys[i];
-        if (key == "control"){
-          key = "ctrl"
-        }
-        opts[key + 'Key'] = true;
-      }
-
       while (source && !source.draggable) {
         source = source.parentElement;
       }
diff --git a/lib/capybara/spec/public/test.js b/lib/capybara/spec/public/test.js
index dc91d1ff..faa5c64b 100644
--- a/lib/capybara/spec/public/test.js
+++ b/lib/capybara/spec/public/test.js
@@ -1,7 +1,18 @@
 var activeRequests = 0;
 $(function() {
   $('#change').text('I changed it');
-  $('#drag, #drag_scroll, #drag_link').draggable();
+  $('#drag, #drag_scroll, #drag_link').draggable({
+    start: function(event, ui){
+      $(document.body).append(
+        "<div class='drag_start'>Dragged!" +
+          (event.altKey ? "-alt" : "") +
+          (event.ctrlKey ? "-ctrl" : "") +
+          (event.metaKey ? "-meta" : "") +
+          (event.shiftKey ? "-shift" : "") +
+          "</div>"
+      );
+    }
+  });
   $('#drop, #drop_scroll').droppable({
     tolerance: 'touch',
     drop: function(event, ui) {
@@ -16,6 +27,14 @@ $(function() {
     }
   });
   $('#drag_html5, #drag_html5_scroll').on('dragstart', function(ev){
+    $(document.body).append(
+        "<div class='drag_start'>HTML5 Dragged!" +
+          (event.altKey ? "-alt" : "") +
+          (event.ctrlKey ? "-ctrl" : "") +
+          (event.metaKey ? "-meta" : "") +
+          (event.shiftKey ? "-shift" : "") +
+          "</div>"
+    );
     ev.originalEvent.dataTransfer.setData("text", ev.target.id);
   });
   $('#drag_html5, #drag_html5_scroll').on('dragend', function(ev){
diff --git a/lib/capybara/spec/session/node_spec.rb b/lib/capybara/spec/session/node_spec.rb
index cb66bc24..b6ac7ab4 100644
--- a/lib/capybara/spec/session/node_spec.rb
+++ b/lib/capybara/spec/session/node_spec.rb
@@ -481,6 +481,7 @@ Capybara::SpecHelper.spec 'node' do
         target = @session.find('//div[@id="drop"]')
 
         element.drag_to(target, drop_modifiers: modifier_key)
+        expect(@session).to have_css("div.drag_start", exact_text: 'Dragged!')
         expect(@session).to have_xpath("//div[contains(., 'Dropped!-#{modifier_key}')]")
       end
     end
@@ -609,6 +610,7 @@ Capybara::SpecHelper.spec 'node' do
 
           element.drag_to(target, drop_modifiers: modifier_key)
 
+          expect(@session).to have_css('div.drag_start', exact_text: 'HTML5 Dragged!')
           expect(@session).to have_xpath("//div[contains(., 'HTML5 Dropped string: text/plain drag_html5-#{modifier_key}')]")
         end
       end