How would I create a panel on drag drop in flex 4?

Question

I am trying to drag a component and on drop I want it to create a panel. Here is the actionscript I have but it doesn't seem to be working, any ideas why?

private function dragDrop(e:DragEvent): void {
    var userPanel:Panel = new Panel();
    userPanel.width = 100;
    userPanel.height = 100;
    userPanel.x = 10;
    userPanel.y = 10;
    userPanel.visible = true;
    addChild(userPanel);
}

Answer 1

The code you've included is valid. Is the drag initiator configured correctly? Is the drop target configured to accept the drag-drop?

Here's some code that will add a panel to canvas1 when canvas2 is dragged into canvas1:

protected function canvas2_dragStartHandler(event:MouseEvent):void {
    var dragInitiator:Canvas=Canvas(event.currentTarget);
    var ds:DragSource = new DragSource();              

    DragManager.doDrag(dragInitiator, ds, event);
}

protected function canvas1_dragEnterHandler(event:DragEvent):void {
    DragManager.acceptDragDrop(Canvas(event.currentTarget));
}

protected function canvas1_dragDropHandler(event:DragEvent):void {
    var userPanel:Panel = new Panel();
    userPanel.width = 100;
    userPanel.height = 100;
    userPanel.x = 10;
    userPanel.y = 10;
    userPanel.visible = true;
    Canvas(event.currentTarget).addChild(userPanel);
}

Answer 2

Cool got it working... so the step I was missing was accepting the drag on the dragEnter event here's the full code:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.core.IUIComponent;
            import mx.events.DragEvent;
            import mx.managers.DragManager;

            import spark.components.Panel;
            private function dragDrop(e:DragEvent): void {
                var userPanel:Panel = new Panel();
                userPanel.width = 100;
                userPanel.height = 100;
                userPanel.x = 10;
                userPanel.y = 10;
                userPanel.visible = true;
                addElement(userPanel);
            }


            protected function canvas1_dragEnterHandler(event:DragEvent):void
            {
                // TODO Auto-generated method stub
                DragManager.acceptDragDrop(event.currentTarget as IUIComponent);
            }

        ]]>
    </fx:Script>
    <mx:Canvas dragEnter="canvas1_dragEnterHandler(event)" dragDrop="dragDrop(event)" width="100%" height="100%" backgroundColor="blue"/>
    <s:List dataProvider="{new ArrayCollection(['a','item','in','here'])}" dragEnabled="true"/>
</s:Application>

Shaun