Drag/drop not working for SortableJS

[jubishop]

Heyo,

I'm using https://github.com/SortableJS/Sortable. I have a simple drag_to to move an item. it works when I use https://github.com/twalpole/apparition but if I swap the driver to cuprite the move of item no longer takes place. I noticed apparition is doing some interesting stuff in its drag_to method: https://github.com/twalpole/apparition/blob/ca86be4d54af835d531dbcd2b86e7b2c77f85f34/lib/capybara/apparition/node/drag.rb#L5 , using a pile of extra JS stored in HTML5_DRAG_DROP_SCRIPT.

I can create a test case showing the problem, using a piece of html/js that incorporates the SortableJS library. If I can provide that, can you help me debug how to get it working? cheers.

[route]

Sure go ahead and I'll help

[swanson]

#182

[jubishop]

interesting, thanks @swanson for getting my attention to your change. I'd love to see the file where you're successfully pulling this off if you have something you'd be willing to share..

[pedantic-git]

Hi @route - I'm just bringing this issue back to life because I've also experienced this same trouble with SortableJS today. My code is open source and my test is here: https://github.com/fishpercolator/name.pn/blob/main/features/signup_and_edit_profile.feature#L242

I tried switching drivers to apparition but in the timebox I had allowed, I couldn't even get apparition to start up - it just hung at me, so I switched by to cuprite and @wip-ed my test.

Had you made any progress on this? Is there any way I can help?

[sergey-arkhipov]

Is there any progress on this issue ?
drag_to does not work with SortableJS.

cuprite (0.14.3)
ferrum (0.13)

Direct use of Ferrum methods doesn't work either

def click_and_drag(draggable, droppable, offset_x, offset_y)
    x1, y1 = draggable.native.node.find_position
    x2, y2 = droppable.native.node.find_position

    mouse = page.driver.browser.mouse
    mouse.move(x: x1, y: y1)
    mouse.down
    mouse.move(x: x2 + offset_x, y: y2 + offset_y)
    mouse.up
  end 

Is any workaround to do that ?

[swanson]

Is there any progress on this issue ? drag_to does not work with SortableJS.

cuprite (0.14.3)
ferrum (0.13)

Direct use of Ferrum methods doesn't work either

def click_and_drag(draggable, droppable, offset_x, offset_y)
    x1, y1 = draggable.native.node.find_position
    x2, y2 = droppable.native.node.find_position

    mouse = page.driver.browser.mouse
    mouse.move(x: x1, y: y1)
    mouse.down
    mouse.move(x: x2 + offset_x, y: y2 + offset_y)
    mouse.up
  end 

Is any workaround to do that ?

As described in #182 -- you will need to use forceFallback: true option in SortableJS and also pass in an option for steps in drag_to (I used 10).

[sergey-arkhipov]

Hi, @swanson !

Thanks for replying .
Maybe we are talking about different versions of gem, but in the current one (cuprite (0.14.3)) you cannot set arguments for the drag_to method.

  expect(page).to have_selector('#questionnaire_fields')
  drag_el = page.find('div.column', text: node_from)
  drag_to_el = page.find('div.column', text: node_to)
  drag_el.drag_to(drag_to_el, steps: 10)

The code from the current gem

# cuprite-0.14.3/lib/capybara/cuprite/node.rb
      def drag_to(other)
        command(:drag, other.node)
      end

Accordingly, the test execution error

`    wrong number of arguments (given 2, expected 1) (ArgumentError)
``

[swanson]

It is there on the main branch: https://github.com/rubycdp/cuprite/blame/main/lib/capybara/cuprite/node.rb#L162

Maybe a release issue?

[route]

The new release is going to happen soon

[sergey-arkhipov]

As described in #182 -- you will need to use forceFallback: true option in SortableJS and also pass in an option for steps in drag_to (I used 10).

Hi, @swanson !
I made a small monkeypath (as I only need one drag_to method) and can confirm that everything works as expected !
Thanks, I will wait for the release with MR enabled.

module Capybara
  module Cuprite
    class Browser
      def drag(node, other, steps)
        x_start, y_start = node.find_position
        x_end, y_end = other.find_position
        mouse.move(x: x_start, y: y_start)
        mouse.down
        mouse.move(x: x_end, y: y_end, steps:)
        mouse.up
      end
    end

    class Node
      # :reek:FeatureEnvy
      def drag_to(other, **options)
        options[:steps] ||= 1
        command(:drag, other.node, options[:steps])
      end
    end
  end
end