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

[brendon]

Just hit up against this also. Is it that Sortable.js is looking for different pointer events? Perhaps it's looking for pointer events and not mouse events? Using the fallback option seems to be a less than optimal solution since it affects actual users.

[ryanb]

@brendon

Using the fallback option seems to be a less than optimal solution since it affects actual users.

I recommend setting the forceFallback option only if Rails.env.test?. I agree it still isn't ideal but at least it only affects test env.

Also I found I needed a higher steps count otherwise the test would flake about 20% of the time. I went with steps: 20.

[brendon]

Thanks @ryanb, for now I've removed those tests. That is a good idea though around forcing the fallback option only in test.

Once day if I have some time I'll try to troubleshoot this a bit more :)

[frenkel]

@ryanb Thanks, forceFallback: true and steps: 20 seem to make it reliable for me!