Canvas drag and drop by using DragManager : DragManager « Development « Flex

Home
Flex
1.Chart
2.Components
3.Container
4.Data Model
5.Development
6.Effects
7.Event
8.Graphics
9.Grid
10.Style
Flex » Development » DragManagerScreenshots 
Canvas drag and drop by using DragManager
        
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal">

    <mx:Script>
        
            import mx.core.DragSource;
            import mx.events.DragEvent;
            import mx.managers.DragManager;

            private function mouseDownHandlerevt:MouseEvent ):void
            {
                var initiator:Box = evt.currentTarget as Box;
                var boxData:Object = new Object();
                boxData.width = 30;
                boxData.height= 40;
                boxData.backgroundColor = "Red";

                var dragSource:DragSource = new DragSource();
                dragSource.addDataboxData, "box" );

                DragManager.doDraginitiator, dragSource, evt );
            }
            private function dragEnterHandlerevt:DragEvent ):void
            {
                ifevt.dragSource.hasFormat"box" ) )
                {
                    DragManager.acceptDragDropCanvasevt.currentTarget ) );
                }
            }
            private function dropHandlerevt:DragEvent ):void
            {
                var boxData:Object = evt.dragSource.dataForFormat"box" );
                var box:Box = new Box();
                box.width = 40;
                box.height = 30;
                box.setStyle"backgroundColor""Yellow");
                box.x = evt.localX;
                box.y = evt.localY;
                canvas.addChildbox );
            }

      
    </mx:Script>

    <mx:Canvas id="canvas" backgroundColor="0x0000FF" width="300" height="300"
        dragEnter="dragEnterHandler(event);"
        dragDrop="dropHandler(event);">
        <mx:Box id="dragItem" width="20" height="20" backgroundColor="0x00FF00"
            mouseDown="mouseDownHandler(event);"/>
    </mx:Canvas>

</mx:Application>

   
    
    
    
    
    
    
    
  
Related examples in the same category
1.Use DragManager.acceptDragDrop to accept drop targetUse DragManager.acceptDragDrop to accept drop target
2.Use DragManager.showFeedback to show user feed back when drag and drop
3.DragManager.showFeedback(DragManager.LINK);DragManager.showFeedback(DragManager.LINK);
4.DragManager.showFeedback(DragManager.COPY);DragManager.showFeedback(DragManager.COPY);
5.DragManager.showFeedback(DragManager.MOVE);DragManager.showFeedback(DragManager.MOVE);
6.Do the drag with DragManagerDo the drag with DragManager
7.DragManager.acceptDragDropDragManager.acceptDragDrop
8.Use DragManager Class and define your own formatUse DragManager Class and define your own format
9.Style for DragManagerStyle for DragManager
w___w_w__.___j__a__va___2s__.___co_m___ | Contact Us
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.