Flex Doc Team

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.

Hi, A great source of some reallly usefull information, Thanks I’ve added you to my favourites.

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

I think these blog is really useful for new comers and Excellent resource list.
It´s a very interesting Blog and simple answer of many questions.
Keep up the good 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...

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.

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?

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