Creating Resizable and Draggable Flex Components

Neat.

The 'x' cursor gets locked on the edge when you drag out of the window.

There's no reaction when the user drags outside the window (when resizing) but does react when dragging the panel.

Otherwise, looks good.

Very nice work! I just happen to have finished my extension of the Flex Panel component which has similar functionality. link. It doesn't have the rubberband effect but I personally think it's not a manditory thing. Keep up the great work!

This is on the lines what I am looking for. What was your reasoning of not simply placing the Draggable Canvas (which does the dragging) as the parent of the DragPanel class instead of a Panel Object? This way the component will be a little more plug-n-play...
I am developing an apollo Dashboard program that has multiple draggable panel sbased on different business metrics (panel for accounting, panel for HR etc) so I need it to be extensible and easily reusable. Any shortcomings you can think of?

In the app that I built this prototype for, I wanted to be able to add as many Panels to the Canvas container as necessary. When you create a custom MXML component from a container, and that container has children defined in the custom component, you can only add more children programmatically by calling addChild().

So, if I built a custom Canvas container named MyDragCanvas.mxml as:

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Panel .../>
<mx:Panel .../>
<mx:Panel .../>
</mx:Canvas>

When I used in in the application, I could not add more Panels to it in MXML - so this would cause a compiler error:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:MyDragCanvas>
<!-- You cannot add children in MXML -->
<mx:Panel .../>
<mx:Panel .../>
</mx:MyDragCanvas>
</mx:Application>

Stephen

Okay... back again. I created a mod of your example simplifying it a bit. It kinda deviates from your whole Drag-n-Drop premise and goes in a more mouseevent listener direction... I didn't want to have the outline of the image I was dragging but the actual image,I didn't want to have to add anything to the parent object, and I wanted to easily add multiple dragPanels like any other component without worrying about configuring a main file and alternate .as file...

Here is the Mod Example


Here is the Source View

Your original code helped out a lot... Still have a couple of hours of modding this, but in the end it will be a nice component to reuse. Thanks so much... really inspired me.

I updated my SuperPanel flex extension to version 1.5. Check it out overhere.

Thanks for this very good article ... Can i translate this and insert on my site in Poland? ... Thanks and Greetings

This is on the lines what I am looking for. What was your reasoning of not simply placing the Draggable Canvas (which does the dragging) as the parent of the DragPanel class instead of a Panel Object? This way the component will be a little more plug-n-play...

You can modify this example to make any component draggable - I used Panel because it ade a nice demo, but there was nothing special about it.

Stephen

I didn't want to have the outline of the image I was dragging but the actual image,I didn't want to have to add anything to the parent object, and I wanted to easily add multiple dragPanels like any other component without worrying about configuring a main file and alternate .as file...

didn't want to have the outline of the image I was dragging but the actual image,I didn't want to have to add anything to the parent object, and I wanted

I've been working on a library to allow user moving & resizing of objects on screen. It's called ObjectHandles and you can find it over at:

http://www.rogue-development.com/objectHandles.xml

Neat.

The 'x' cursor gets locked on the edge when you drag out of the window.

There's no reaction when the user drags outside the window (when resizing) but does react when dragging the panel.

Otherwise, looks good.

I've been working on a library to allow user moving & resizing of objects on screen. It's called ObjectHandles and you can find it over at:

woo, great.
I like these graggable pannel. although ajax can do it, but aways occurs some errors.

Hi,

I have included the DragPanel.as file in my assets directory. But i am creating a panel at run time in my application using action script. How can i create a new instance of this DragPanel.

Though i insert it and
say var zonePanel:Panel = new DragPanel(), its not working.

Any help in this.

Thanks in Advance
Stranger

Hi,

I am able to create these Panels at run time. But when i try to drag and drop the panel, it gets sticked to the cursor and the panel keeps on moving until i move the cursor till i refresh the whole page.

What could be the problem.

Thanks
Stranger.

When I used in in the application, I could not add more Panels to it in MXML - so this would cause a compiler error:

Hello to the Flex Doc Team,

I'm new to this flex builder. From the Flex Builder 2 sample flexstore on the drag&drop function, at the flexstore product's view I'm able to drag the phone box and drop to the compare or cart's box. I've look on the ProductCatalogThumbnails.mxml which is the canvas drag box of the phones and Productlist.mxml which is its drop location from the compare and shopping cart's canvas.

I've tried successfully on the drag&drop single images based on the list-based controls TileList. However as I'm looking at the flexstore, I can drag the canvas (phone) and drop it to the canvas (cart or compare).

What I would like to know is how to make the canvas drag&drop into other canvas. I see there are some similiarity from the simple drag-and-drop operation for a nonlist-based control example but if I want to drag&drop with image and label, from one canvas to another canvas, how to do it? Could you please help me on this?

regards,
cwong

regarding the comment from cwong:

Hi,

A good place to start it to take a look at the drag and drop doc here: http://livedocs.adobe.com/flex/3/html/dragdrop_1.html

There are several examples using a Canvas container, including the ones on these pages:

- "Example: Simple drag-and-drop operation for a nonlist-based control" on http://livedocs.adobe.com/flex/3/html/dragdrop_5.html

- "Example: Using a container as a drop target" on page http://livedocs.adobe.com/flex/3/html/dragdrop_7.html

- "Moving and copying data for a nonlist-based control" on page http://livedocs.adobe.com/flex/3/html/dragdrop_8.html

Stephen

Phillip Kerman said:
The 'x' cursor gets locked on the edge when you drag out of the window.




Well it is not such a big problem I think. The windows are dragable and resizable, thus very effective and user friendly.

Ken Derren

Hello,
I would like to thank you first of all for providing the code, and having such a nice code to drag-and-drop panels. I am working on making a TitleWindow to drag-and-drop in a big application. I followed the way you provided. In a small prototype, it works very well, but when I try to make the same in the original application, I don't get an error, but the titlebar moves (having the mouse pointer with an x).
I was told that the event is not bubbling up to the Application, so the event is not reaching to the drop point. But I don't know how to solve it. Do you have any idea how to do that? Or if you think the reason maybe another issue?
Many thanks
Rana

When I used in in the application, I could not add more Panels to it in MXML - so this would cause a compiler error

The 'x' cursor gets locked on the edge when you drag out of the window.

There's no reaction when the user drags outside the window (when resizing) but does react when dragging the panel.

Otherwise, looks good.

I created a mod of your example simplifying it a bit. It kinda deviates from your whole Drag-n-Drop premise and goes in a more mouseevent listener direction... I didn't want to have the outline of the image I was dragging but the actual image,I didn't want to have to add anything to the parent object, and I wanted to easily add multiple dragPanels like any other component without worrying about configuring a main file and alternate .as file..
medyum

I would like to thank you first of all for providing the code, and having such a nice code to drag-and-drop panels.But i have another problem if i am minimize one panel and size of another panel autometically not maximize

Very nicely done. But it seems if you remove the 'backgroundColor' setting from the Canvas, then you can no longer drag the panel outside the boundries of itself!

Is this an issue with this code in particular, or a more genral bug?

I didn't want to have the outline of the image I was dragging but the actual image,I didn't want to have to add anything to the parent object, and I wanted to easily add multiple dragPanels like any other component without worrying about configuring a main file and alternate .as file...

The app is great and works fine but do you have a similar example for dragging and dropping images and then resizing or rotating those dropped images. If you can point me to some easy tutorial then it would be of great help.

This is great. But is it possible to save the state of the panel so that when the application is opened next time, the panels should be placed at the position when it was closed and not reset to its original position.

thank you everybody .This very important blog