Simulating iOS’s “Edit Home Screen mode

Anyone here versed in simulating iOS’s “Edit Home Screen” mode?

Specifically, I want to mockup an ios home screen thats editable— allowing you to click-and-drag apps around to rearrange them on the simulated home screen.

The part i am tripping over is how to mimmick the “collision-detection” and “scooting away” engines.

I have tried thinking thru using:

  • The IF widget-x is OVER widget-y trigger — for when the dragged app is dragged over a non-dragged app.
  • And if an app is in column-3, row-4, then move it right to column-4, but if its in column-4, then move it down to row-5, column-1, etc.
  • But theres a reverse domino-effect that has to happen beforehand so that a parking space” opens up for the app being dragged.

I would “program” the columns and rows to shift the appropriate apps over left, right, and up, down.

I am afraid i am getting myself into a too-many, permutations-rabbit hole and nightmare tho’.

I think I only know the “brute strength” approach to these types of axure interactions.

Can someone (perhaps with a front end dev background) offer some pointer please?

Thanks!
John

The easiest way to do this is to give each icon its own code, with every icon having the same code. As you drag, send a message to every icon, and each icon will determine where to go based on where the vacated space is, which you can store in x y variables.

E.g., give each icon a Rotate event handler and fire the Rotate command on each one. I have an example somewhere. I’ll see if I can find it

Here is the one I was thinking of. This works just horizontally, but it could work in a grid as well. The prototype has multiple pages, and the last one explains how it works. But it’s essentially what I described above, but slightly more limited. The stationary icon that the dragged icon is currently above is asked, “is now the time for me to fill the vacant space?”