Repository files navigation

Code and examples for scripting drag-and-drop in lists run by Sortable.js

This repo contains a script for automating drag-and-drop in lists run by Sortable.js. This is not straightforward, and should enable scripting and testing of UI elements that were not possible before.

script_sortable_dnd.js contains the key code. RuntriggerSortableDragAndDrop('#drag', '#drop'); to drag element with iddrag to the element with iddrop.

There's a simple example of scripting a Sortable list insortable_example.html.

A simple, non-Sortable example isnon_sortable_example.html, which is an adaption ofW3School's example code. This requires a more general version of the script, which is inscript_sortable_dnd_more_general.js.

One recent day, I was trying to script drag-and-drop actions on a Sortable list (that is, one controlled bySortable.js library, as it happened as part of theAngular Sortable library).

Due to abug in Selenium's support for Google Chrome which the developers do not seem at all inclined to fix, I could not use the simple method of sending an HTML5 drag-and-drop event to the page.

After much searching I found some useful links and scripts for mimicking drag-and-drop with individual browser events. One of these isdrag_and_drop_helper.js provided byrcorreia@blurb.com. Another useful resource was a script fordrag-and-drop for Casper which I used as the starting point for the script included here.

I removed many of the events and introduced two key changes to get Sortable.js to respond properly:

• I put delays in between important groups of events.
• I added a check to see if the target element has moved; if not, the script retries a few times. This is necessary because Sortable does some funky stuff in terms of adding a "ghost" element into the list, and also because, unlike most drag-and-drop actions, the target may move (in fact, that's the point).

The script is very hacky. If it's not working for your browser / page / Sortable.js version, you may want to add in some additional events or delays, or just increase DELAY_INTERVAL_MS or MAX_TRIES. For debugging, you can increase DELAY_INTERVAL_MS and watch the DOM elements change to understand what Sortable is doing. That code is ... let's say not easy to grok.

One thing you'll want to check is that the script works both for an element dragged to an elementabove it on the list and as well as to an elementbelow it on the list.

I found this page onscripting in Protractor to be helpful early in my process of working this out.