The grids would look something like this:
You can check out the code at: http://docs.google.com/Doc?id=ddhf5h22_69w36cmdh
Any queries/problems /suggestions are welcome :)
Cheers!
Becoming a Freelancer as a Finance Professional
5 years ago
Tuesday, February 26, 2008
Drag and Drop Grid of Panels
I needed a grid of panels in which I could exchange the places held by panels by dragging and dropping. I should be able to toggle the visibility of the panel and re-arrange the panels as need be. The grid should be scalable. This would be something like the igoogle panel and is available in most AJAX frameworks like zkoss and yui. Keeping this in mind I have written this code for a 3x3 grid. You can adapt it to any size and any container.
The grids would look something like this:
You can check out the code at: http://docs.google.com/Doc?id=ddhf5h22_69w36cmdh
Any queries/problems /suggestions are welcome :)
Cheers!
The grids would look something like this:
You can check out the code at: http://docs.google.com/Doc?id=ddhf5h22_69w36cmdh
Any queries/problems /suggestions are welcome :)
Cheers!
Subscribe to:
Post Comments (Atom)
Posts
11 comments:
Hi, very cool example!!
i would know if is possible to modify your samp,e to mimic igoogle page...for example suppose that i have an invisble grid for the layout n the main panel of my app...then i would add others panels on demand and finally move then around the panel maintining the layput imposed by the grid layout...
an example of this one but not in flex
http://nettuts.s3.amazonaws.com/127_iNETTUTS/demo/index.html
can you help me?
thanks a lot
Regards
TheLord
Hi Lorenzo,
I certainly can try to help you, though for past three months I have been busy like crazy. Will try to have a look this weekend and see what I can do to make a grid as shown in the link. Cheers.
Hey there,
I almost programmed the same thing in Flex today... then I found your post.
You did some great work!!! I have it working now and saving the positions to a database... it's really slick.
My issue right now is the hit area on the title windows. Do you know how to make it only moveable when the user is moused over the border/title bar? The PopUpManager does this well... but when you add a MouseEvent to the TitleWindow as a whole, it assumes you want to drag the window no matter where you click.
The problem with that is if you have interactive content (e.g. buttons) inside the TitleWindows, they won't work.
Any ideas?
Great work!
Thanks Alex :). As you can see from the period of my inactivity, my work load has been a bit heavy. I will have to look into this and I definitely will. Hopefully, I will be back with another post to help Lorenzo, you and other friends :). I am glad you found it to be of some help. Tc care
Hi,
thanks for the reply...and thanks for your help..
Regards
Lorenzo
Thanks for the reply and your patience Saveen..
Regards
Lorenzo
Hi,
This is what I was looking for but I want to drag and drop (invisible grid )of panels to work on windows form in vb.net and should be able to move around the panel maintaining the layout imposed by grid.
Can you please help me?
Thanks in advance!!!
Shraddha
Hi,
Can you please help me. I am in a big trouble. I am looking for the same functionality, dragging and dropping panels but on windows form. I dont want panels to overlap each other when I drag and drop them on other panel.
Thanks in advance!!
Shraddha
Its a very inteligent exmp..
I want a similar kind of example for my project. i have to implement the drag and drop feature like igoogle kind of... and the drag and drop should be on titlebar not on whole titile window.
I have tried to change in ur code but it is showing some error..
Could you please help me how to do that....
Thaks a lot in advance
SLM
This post is great. It helped me accomplish this same task at work and was quick to find in google.
The following link: http://docs.google.com/View?id=dgdgfsn6_0cwv89gc2 is the same code as before but using only three panels. It implements the drag and drop functionality by doing the operation only at the title area.
It is simply a quick and dirty way to add mouse event listener to the title area and perform the operation if is initialized there.
The DragPanel object I've got it from the source code in this link: http://blogs.adobe.com/flexdoc/drag_and_drop/ For this thing to work one needs to have access to the title object in the panel and title in panel object is not public.
Anonymous, just add mouseMove="{mouseIsDown=false}" in the child component of your titlewindow
Post a Comment