Menu
I'm tryting to write a cucumber/capybara test to reorder some items and then save them back. Any thoughts on how to best do this?
661
It can be used to build highly interactive web applications or can be used to add widgets easily. The jQuery UI Sortable update event is used to trigger when the user stopped sorting and the DOM position has changed. Initialize the sortable widget with the update callback function. Bind an event listener to the sortable update event.
Description: Reorder elements in a list or grid using the mouse. The jQuery UI Sortable plugin makes selected elements sortable by dragging with the mouse. Note: In order to sort table rows, the tbody must be made sortable, not the table. The sortable widget uses the jQuery UI CSS framework to style its look and feel.
A selector of other sortable elements that the items from this list should be connected to. This is a one-way relationship, if you want the items to be connected in both directions, the connectWith option must be set on both sortable elements. Initialize the sortable with the connectWith option specified:
Defines the cursor that is being shown while sorting. Moves the sorting element or helper so the cursor always appears to drag from the same position. Coordinates can be given as a hash using a combination of one or two keys: { top, left, right, bottom }. Initialize the sortable with the cursorAt option specified:
I have developed a JQuery plugin to solve this problem, check out jquery.simulate.drag-sortable.js which includes a plugin along with a suite of tests and examples.
Hope you find this useful! Feedback is welcome.
Matt
142
the drag_to method did not work for me. But I was able to cause the first element in my list to be dragged to the last position by including the following in my capybara selenium test using jquery.simulate.js :
page.execute_script %Q{
$.getScript("/javascripts/jquery.simulate.js", function(){
distance_between_elements = $('.task:nth-child(2)').offset().top - $('.task:nth-child(1)').offset().top;
height_of_elements = $('.task:nth-child(1)').height();
dy = (distance_between_elements * ( $('.task').size() - 1 )) + height_of_elements/2;
first = $('.task:first');
first.simulate('drag', {dx:0, dy:dy});
});
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
