How to do a puzzle in axure?

I don’t have a full answer for this but I got part of the way there with the “reorderable repeater.rp” file found in this thread about a similarish question: Drag and Drop Reorderable Repeater

I got as far as turning it into a 3x3 repeater (using the wrap option in the style panel) and getting drag and drop started (i modified the Dragged Interaction on the dynamic panel in the repeater. It gets part of the way there.

However, where I stopped was getting the reordering to work, it seems to be based upon the “dropIndex” variable which is set inside the Dragged Interaction on the dyn panel in the repeater, the value of it is dependent on where your mouse cursor is pointing, but I think you’ll need to update to work horizontally as well as vertically.

Random ideas that might turn out to be wrong:

  • Maybe you need to is a dropIndexX that is the same as dropIndex except the math is based around Cursor.y
  • Maybe you instead update dropIndex to track the row # and have another variable to track the column # to know where to re-sort the tile.

Curious to see where you end up with this, it’s definitely a tricky one. Is this a requirement to demo inside Axure or are you just challenging yourself to come up with a solution in Axure? I ask because it may prove to be easier and/or faster to mock this up inside a 3rd party tool (or like a slider puzzle js library) and use Inline Frame to embed it within your prototype.

Edit: There might also be something worth looking into in this thread: Snapping DPs to grid on drop drag