drag and drop panels for ios 7 / iphone5 in place so resulting panels move.

User shared this question 5 years ago

I am trying to make dynamic drag and drop panels using ios 7 widget library. By this I mean let's say I have 3 panels, we will name them Schedule 1, Schedule 2, and Schedule 3. Each of these schedules are 320x30 px and they are in order vertically 1 then 2 then 3. I want to drag Schedule 3 so it goes in place of Schedule 1 on the top. And then I want Schedule 1 and 2 to automatically shuffle down to allow Schedule 3 to fall into place after I let go of my finger. The resulting order will then be Schedule 3, Schedule 1, Schedule 2.

Is this possible? How can it be done?


Comments (4)



yes, it's possible to do it. Please, take a look to this topic: https://www.justinmind.com/community...

If you need more help, write us back.

Best regards.


that is really complex and much more than I want to do. I would just like to move panels up and down. Like this:

ead85904a0e9f56a15d05ef4eedb5ff5 <a href="https://d2r1vs3d9006ap.cloudfront.net/s3_images/1005082/fork-13.png?1388709517"; rel="nofollow">

</a> <a href="https://d2r1vs3d9006ap.cloudfront.net/s3_images/1005084/fork-14.png?1388709532"; rel="nofollow">




Add a dynamic panel to the canvas. Select it, click on the properties tab, look for the layout property and choose "vertical layout".

Now, double click on the dynamic panel and drag a rectangle into the dynamic panel.

Select the rectangle and create a "on drag" event, then click the "move" action, choose "with cursor" option, check the "constraint by parent container" parameter and click ok.

Add another event, in this case select "on drag stop". Choose the "insert into" action, select the rectangle as the component that you want to insert (is selected by default) and choose the panel (not the dynamic panel). Then click ok.

Once you have done, you only need to duplicate the rectangle, object or widget and modify the text.

I hope it helps you.

Best regards.


thanks for your help here. With your guidance and a little extra fine tuning on my part, I got this working perfectly. If anyone sees this and wants this functionality as well, here are the extra steps I did in addition to what you wrote:

1. I made sure that the dynamic panel and the 3 images I had placed inside of it fix exactly inside the dynamic panel right down to the pixel. So if the dynamic panel is 10x30, your images that you want to move around will have to be 10x10, 10x10, and 10x10. If this is off by even 1 pixel, it screws everything up and it doesn't work properly. Or for me anyhow.

2. I had to place two additonal events on the draggable image (the two images that are to be moved do not receive or need any events embedded in them): I selected a "on drag start" - then selected "move" action, then I selected "constraint by parent container"

3. I selected one of the 2 images that I want to move (not the one I am dragging) then I wrote in the new xy coordinates under "to position".

4. I wanted them to both shift down so I just had to change the y coordinates in my example. I just wrote the exact length of the image itself.

5. Made sure "relative" was selected.

6. Picked an animation. (these don't seem to work anyhow. No big deal I guess.

7.pressed okay.

8. Did the same with the other image I wanted to slide into place the only difference being the y coordinates.

You can then select the draggable image and move it up and down perfectly and everything works good.