Javascript testing to simulate drag for JQuery UI sortable lists

Question

I am trying to write some front end Javascript tests that can test drag and drop functionality of the JQuery UI sortable list I am using in my web app. However, I have hit a problem in that the JQuery UI sortable list does not seem to respond to simulate mouse events.

I tried a number of techniques to test this, but in the end I found JQuery's own simulation plugin which seems to provide the functionality I need. However, when I run the simulations, the sortable list does not respond to the drag event, yet other components such as Draggable do respond.

This can all be very easily demonstrated with the simple drag simulation example I put together. In this example I have embedded the jquery.simulate plugin but modified the drag function to slow down the events it is firing so that you can visually see what is happening. As you will see, the simulation plugin is correctly moving List item 1 down to between items 3 and 4, yet when the mouseup event is fired, the item just snaps back to it's original position instead of reordering the list. I suspect there must be another event the JQuery UI library is looking for, but unfortunately I've not been able to find it.

Please go to http://jsbin.com/efuyef/7/edit#javascript,live to see the example where the sortable list drag fails. Just refresh the page to get the simulation to run again.

Has anyone got any ideas how I can correctly simulate the drag event on a sortable list? Your help would be appreciated.

Answer 1

After much searching around the web, I found NO solution to this problem, so I've gone ahead and developed my own solution.

Check out the Github repository for my JQuery plugin jquery.simulate.drag-sortable.js

If you find any problems with this, please do write a test to replicate the issue and fork the project or raise an issue in Github.