Whilst jquery.simulate.js provides functionality to simulate many JQuery and JQuery UI event, it is unable to simulate a drag event for a JQuery UI Sortable widget due to the intricate behaviour needed to make the JQuery UI Sortable widget fire the correct events.
This library allows you to simulate Drag events for a JQuery UI Sortable, which I have found most useful when doing thorough integration tests.
- You can simulate an item being dragged up or down within a Sortable list by a specified number of items
- Support for drag handles
- Support for place holders
- Support for limiting list to items which match a selector
- Currently does not work with linked lists
- Does not support horizontally ordered lists
- beforeStop event does not fire
Include jquery.simulate.drag-sortable.js file after JQuery has been included.
// drag item down one position in the list
$('#itemToDrag').simulateDragSortable({ move: 1 });
// drag item down one position in the list and only treat elements which match .draggable as part of the list
$('#itemToDrag').simulateDragSortable({ move: 1, listItem: '.draggable });
// drag item up one position in the list using the handle .handle
$('#itemToDrag').simulateDragSortable({ move: -1, handle: '.handle });
// drag item up two positions in the list with support for a place holder
$('#itemToDrag').simulateDragSortable({ move: -2, placeHolder: '.custom-place-holder' });
As discussed on stackoverflow,
capybara's built in drag_to method does not work with jQuery sortable. Instead, you can integrate this script into a
custom cucumber step. I suggest fetching the script within your step in order to avoid mixing test scripts with production
scripts. With that in mind, a custom step might look something like:
# Example usage:
#
# When I drag "10 Testing Tips" down 1 position
# When I drag "What's new in BDD" up 2 positions
#
When /^I drag "([^"]*)" (up|down) (\d+) positions?$/ do |post_title, direction, distance|
post = Post.find_by_title(post_title)
distance = distance.to_i * -1 if direction == 'up'
page.execute_script %{
$.getScript("http://your.bucket.s3.amazonaws.com/jquery.simulate.drag-sortable.js", function() {
$("li#post_#{post.id}").simulateDragSortable({ move: #{distance.to_i}});
});
}
sleep 1 # Hack to ensure ajax finishes running (tweak/remove as needed for your suite)
end
Note: This example suggests serving the script from Amazon S3 but it could come from anywhere, including inside your app
if you prefer. Also, (if it's not obvious) you'll need to set something like dom_id(@post) on your draggable list item
in order for the jQuery selectors to work properly.
If you're having trouble moving up/down the correct number of positions (i.e. you've set move to 2 but it only moves
down one position), try adjusting the tolerance option. The default usually works properly, but in some cases you may
need to tweak it a bit, especially if your list items are irregular heights.
I welcome feedback and commits to this library. Please fork me on Github at https://github.com/mattheworiordan/jquery.simulate.drag-sortable.js
This script was written by Matthew O'Riordan
jquery.simulate.drag-sortable.js is Copyright © 2011 Matthew O'Riordan, inc. It is free software, and may be redistributed under the terms specified in the LICENSE file.
