Drag to copy image between two Canvas controls : Image Drag Drop « Graphics « 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 » Graphics » Image Drag DropScreenshots 
Drag to copy image between two Canvas controls
Drag to copy image between two Canvas controls
           
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal">
    <mx:Script>
    
    import mx.managers.DragManager;
    import mx.core.DragSource;
    import mx.events.DragEvent;
    import flash.events.MouseEvent;
    
    [Embed(source='logo.jpg')]
    public var globeImage:Class;
    private function mouseOverHandler(event:MouseEvent):void
    {
        var dragInitiator:Image=Image(event.currentTarget);
        var ds:DragSource = new DragSource();
        ds.addData(dragInitiator, "img");
        var imageProxy:Image = new Image();
        imageProxy.source = globeImage;
        imageProxy.height=10;
        imageProxy.width=10;
        DragManager.doDrag(dragInitiator, ds, event,imageProxy, -15, -151.00);
    }
    private function dragEnterHandler(event:DragEvent):void {
        if (event.dragSource.hasFormat("img"))
            DragManager.acceptDragDrop(Canvas(event.currentTarget));
    }
    private function dragOverHandler(event:DragEvent):void
    {
        if (event.dragSource.hasFormat("img")) {
           DragManager.showFeedback(DragManager.COPY);
        }else{
           DragManager.showFeedback(DragManager.NONE);
        }
    }
    private function dragDropHandler(event:DragEvent):void {
        if (event.dragSource.hasFormat("img")) {
            var draggedImage:Image = event.dragSource.dataForFormat('img') as Image;
            var dropCanvas:Canvas = event.currentTarget as Canvas;
            var newImage:Image=new Image();
            newImage.source = draggedImage.source;
            newImage.x = dropCanvas.mouseX;
            newImage.y = dropCanvas.mouseY;
            dropCanvas.addChild(newImage);
        }
    }
    private function dragCompleteHandler(event:DragEvent):void {
        var draggedImage:Image =event.dragInitiator as Image;
        var dragInitCanvas:Canvas =event.dragInitiator.parent as Canvas;
        if (event.action == DragManager.MOVE)
            dragInitCanvas.removeChild(draggedImage);
    }
  
    </mx:Script>
    <mx:Canvas width="50" height="50" backgroundColor="#0000FF"
        <mx:Image id="myimg" source="@Embed(source='logo.jpg')" mouseMove="mouseOverHandler(event);" dragComplete="dragCompleteHandler(event);"/>
    </mx:Canvas>
    <mx:Canvas width="50" height="50" 
                backgroundColor="#0000FF"
                dragEnter="dragEnterHandler(event);"
                dragOver="dragOverHandler(event);"
                dragDrop="dragDropHandler(event);">
    </mx:Canvas>
</mx:Application>

   
    
    
    
    
    
    
    
    
    
    
  
Related examples in the same category
1.Creating a custom drag imageCreating a custom drag image
2.Drag and drop image on Canvas with ghost imageDrag and drop image on Canvas with ghost image
3.Drag and drop image on CanvasDrag and drop image on Canvas
4.Drag and move an Image from one Canvas to another CanvasDrag and move an Image from one Canvas to another Canvas
5.Use Image control to load a draggable image into a Canvas container.Use Image control to load a draggable image into a Canvas container.
6.Drag and Drop Image, Copy MoveDrag and Drop Image, Copy Move
java2s.com  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.