What you are proposing is quite complicated to to begin with. I would start writing on paper a state machine of the basic states that are needed. The default state is easy, the “squiggly” state is entered when someone long-presses the MouseArea, and is the same but adds animations to the rectangles, and allows dragging of them, etc.

The next one is probably the harder. I have no idea on how to do it, since I haven’t played with dragging stuff.

Appreciate your help, really need to get my mind around the element drag rearrange code… mind blown

Isn’t this exactly what a GridView [doc.qt.nokia.com] does?
You can use an onPressAndHold [doc.qt.nokia.com] inside the delegate to wait for the users action and then reparent that item to move it.
The other items will slide in to position (you can use onRemove [doc.qt.nokia.com] signal).

Is onLongPress the same as onPressAndHold?

Oh yes, it would be :) Thanks.

I guess that would just leave animating the squiggly state, which I assume could be done in the delegate.

xsacha, thanks for the update. And the links to the docs! :)

Not quite sure what you mean by a ‘squiggle’. I assume you just mean some sort of animation related to ‘loading’ though.

I will show how I manage loading events. I use a rotating circle with different shades of black along the perimeter:

loading.png
http://goo.gl/SDG7T

Loading.qml

You could just have the Loading item inside your delegate then:

There are a few ways to enable/disable the Loading element. One way is to use the onPressed signal to make the Loading element visible (visible = true) and onReleased to make it invisible (visible = false).

You would also make it invisible when the onPressAndHold enters though, as it will be reparented as that stage and not part of the GridView. Makes sense I think :).

Squiggly refers to the slight rotation oscillation on the icons when in a moveable state. Here is a video [youtube.com]

Oh, I see.
Not sure if the OP wants to replicate this effect exactly as it seems a bit silly and obvious copying if you used it.

However, to do this, you would have to make use of States.

Inside the delegate you would use:

Then you would have code within the delegate for the animation, as follows:

I haven’t tested that rotation out but I assume it loops -40, 40, -40. 400ms per side. Which is what you would want.

So has anyone confirmed that rearranging an item in the grid view will cause the items to rearrange.

I can confirm this.

Where your model is:

You can also use Flow [doc.qt.nokia.com] QML element as an alternative to GridView. It doesn’t support model/delegate but rather Loader’s and Qt.createObject’s. As there is no predefined order, the order is created only from what appears. So you can remove objects from the view and have them realign depending on visibility/opacity and position.

I can’t wait to try this on Monday morning.

Here is another complexity: what if I have two different sizes of rectangles that need rearranging?

kyleplattner wrote:

Here is another complexity: what if I have two different sizes of rectangles that need rearranging?

The GridView will still be a grid of identically sized areas. You’d have space around the smaller ones.

They will certainly appear as different sizes. However, as Bradley says, the center of the rectangle will not change. There will just be more space around them.
You can change the spacing of the GridView by using cellHeight [doc.qt.nokia.com] and cellWidth [doc.qt.nokia.com] properties.

If you need variable spacing, perhaps you would prefer a Flow element.

I will have to apologize but I started poking around and I cannot figure out the reparenting code. Here is how I have things setup: