It has been a long time coming, but the first phase of Drag and Drop is now live and ready to use. It took a long time because we had a set of quite particular requirements, so it was hard to find a flexible enough library and then make it work the way we wanted.
Some of our requirements were:
- Ability to drag rules
- Ability to reorder examples within a rule
- Ability to move examples between rules
- Rules can extend beyond the confines of the screen in both directions (e.g. you may want 20 columns x 4 rows)
- Rules have a definitive order, so that when they are exported as text, your carefully constructed Example Map is not in a surprising order
- Rules can easily extend vertically to accomodate Rule text and Examples
To get the definitive order we went back to first principles of Post-it notes on a table. You wouldn’t lay the notes out like HTML lays out elements, and you wouldn’t use vertical compacting. Instead you would most likely have multiple rows, which is what we have opted for. You can either fill up the top row and then start adding to the next row, or keep going horizontally and scroll the page, or whatever you like. Rules can be dragged between the rows. When the Example Map is exported the order is from left to right of the first row, then the next row, and so on.
Here is an example Example Map showing two rows:
We also took the opportunity to fix Jira exporting, so now if you use JSON in your Example Map, it will appear properly in Jira.
As mentioned this is phase one. We have not yet implemented the ability to drag Examples, or Questions, although we have spiked these and no they are possible! Please try out drag and drop Example Maps and let us know what you think on Twitter @TeamUpLabs.