Merge pull request #2270 from nickgnd/preserve-mouse-position-on-dnd

Preserve clientX/clientY in HTML5 drag and drop events
teamcapybara · Nov 14, 2019 · 374546b · 374546b
2 parents 39414c8 + ff43b47
commit 374546b
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 5 deletions.
diff --git a/lib/capybara/selenium/extensions/html5_drag.rb b/lib/capybara/selenium/extensions/html5_drag.rb
@@ -166,17 +166,18 @@ def html5_drop(*args)
         var dragOverOpts = Object.assign({clientX: targetCenter.x, clientY: targetCenter.y}, opts);
         var dragOverEvent = new DragEvent('dragover', dragOverOpts);
         target.dispatchEvent(dragOverEvent);
-        window.setTimeout(dragLeave, step_delay, dragOverEvent.defaultPrevented);
+        window.setTimeout(dragLeave, step_delay, dragOverEvent.defaultPrevented, dragOverOpts);
       }
 
-      function dragLeave(drop) {
-        var dragLeaveEvent = new DragEvent('dragleave', opts);
+      function dragLeave(drop, dragOverOpts) {
+        var dragLeaveOptions = Object.assign({}, opts, dragOverOpts);
+        var dragLeaveEvent = new DragEvent('dragleave', dragLeaveOptions);
         target.dispatchEvent(dragLeaveEvent);
         if (drop) {
-          var dropEvent = new DragEvent('drop', opts);
+          var dropEvent = new DragEvent('drop', dragLeaveOptions);
           target.dispatchEvent(dropEvent);
         }
-        var dragEndEvent = new DragEvent('dragend', opts);
+        var dragEndEvent = new DragEvent('dragend', dragLeaveOptions);
         source.dispatchEvent(dragEndEvent);
         callback.call(true);
       }

diff --git a/lib/capybara/spec/public/test.js b/lib/capybara/spec/public/test.js
@@ -12,10 +12,21 @@ $(function() {
   $('#drag_html5, #drag_html5_scroll').on('dragstart', function(ev){
     ev.originalEvent.dataTransfer.setData("text", ev.target.id);
   });
+  $('#drag_html5, #drag_html5_scroll').on('dragend', function(ev){
+    $(this).after('<div class="log">DragEnd with client position: ' + ev.clientX + ',' + ev.clientY)
+  });
   $('#drop_html5, #drop_html5_scroll').on('dragover', function(ev){
     $(this).after('<div class="log">DragOver with client position: ' + ev.clientX + ',' + ev.clientY)
     if ($(this).hasClass('drop')) { ev.preventDefault(); }
   });
+  $('#drop_html5, #drop_html5_scroll').on('dragleave', function(ev){
+    $(this).after('<div class="log">DragLeave with client position: ' + ev.clientX + ',' + ev.clientY)
+    if ($(this).hasClass('drop')) { ev.preventDefault(); }
+  });
+  $('#drop_html5, #drop_html5_scroll').on('drop', function(ev){
+    $(this).after('<div class="log">Drop with client position: ' + ev.clientX + ',' + ev.clientY)
+    if ($(this).hasClass('drop')) { ev.preventDefault(); }
+  });
   $('#drop_html5, #drop_html5_scroll').on('drop', function(ev){
     ev.preventDefault();
     var oev = ev.originalEvent;

diff --git a/lib/capybara/spec/session/node_spec.rb b/lib/capybara/spec/session/node_spec.rb
@@ -493,6 +493,21 @@
         expect(@session).to have_css('div.log', text: /DragOver with client position: [1-9]\d*,[1-9]\d*/, count: 2)
       end
 
+      it 'should preserve clientX/Y from last dragover event' do
+        @session.visit('/with_js')
+        element = @session.find('//div[@id="drag_html5"]')
+        target = @session.find('//div[@id="drop_html5"]')
+        element.drag_to(target)
+
+        # The first "DragOver" div is inserted by the last dragover event dispatched
+        drag_over_div = @session.find('//div[@class="log" and starts-with(text(), "DragOver")]', match: :first)
+        position = drag_over_div.text.sub('DragOver ', '')
+
+        expect(@session).to have_css('div.log', text: /DragLeave #{position}/, count: 1)
+        expect(@session).to have_css('div.log', text: /Drop #{position}/, count: 1)
+        expect(@session).to have_css('div.log', text: /DragEnd #{position}/, count: 1)
+      end
+
       it 'should not HTML5 drag and drop on a non HTML5 drop element' do
         @session.visit('/with_js')
         element = @session.find('//div[@id="drag_html5"]')