Drag and Drop Phase One Now Live!

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:

Example Map With Drag and Drop

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.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s