Drag and Drop Image loaded by flex-loader. Original Source should not be removed

Question

yesterday me and my friend Ketan thakkar were working on an issue related with drag drop in flex.

Image can dragged easily if it is has direct your or embedded image. But if we try to drag image which has a source from flex loader, original image loos the parent and then never go back to its original place. We tried to find the solution and with a good luck we got success.

the code is below. If anyone know why this problem exist please help us. For now we have managed it this way.

<?xml version="1.0" encoding="utf-8"?>

<mx:Script>
    <![CDATA[
        import mx.controls.Image;
        import mx.core.DragSource;
        import mx.core.FlexLoader;
        import mx.core.UIComponent;
        import mx.events.DragEvent;
        import mx.events.FlexEvent;
        import mx.graphics.ImageSnapshot;
        import mx.managers.DragManager;

        private var fl:FlexLoader = new FlexLoader();

        private var img1:Image = new Image();   

    private function doDragEnter(event:DragEvent):void
    {           
        DragManager.acceptDragDrop(UIComponent(event.target));
    }

    private function doDragDrop(event:DragEvent):void
    {
        var img:Image;
        if (event.dragInitiator.parent == dropCanvas)          
            img = event.dragInitiator as Image;
        else
        {
            img = new Image();
            img.width = img.height = 120;
            img.source = img1.source;
            img.addEventListener(MouseEvent.MOUSE_DOWN, doDragStart);
            dropCanvas.addChild(img);          
        }
        img.x = event.localX - (event.dragSource.dataForFormat("localX") as Number);
        img.y = event.localY - (event.dragSource.dataForFormat("localY") as Number);
    }

    private function doDragStart(event:MouseEvent):void 
    {
        var imageSnap:ImageSnapshot = ImageSnapshot.captureImage(event.currentTarget as IBitmapDrawable);
        var imageByteArray:ByteArray = imageSnap.data as ByteArray;
        img1.load(imageByteArray);

        var dragInitiator:Image = event.currentTarget as Image;
        var dragSource:DragSource = new DragSource();
        var dragProxy:Image = new Image();
        dragProxy.source = img1.source;
        dragProxy.x = mouseX-25;
        dragProxy.y = mouseY-25;
        dragProxy.width = 80;
        dragProxy.height= 80;

        DragManager.doDrag(dragInitiator, dragSource, event, dragProxy,0,0,1,false);
    }

        protected function application1_creationCompleteHandler(event:FlexEvent):void
        {
            fl.contentLoaderInfo.addEventListener(Event.COMPLETE, oncomplete);
            fl.load( new URLRequest('assets/1.swf'));
        }

        private function oncomplete(event:Event):void
        {
            img.source = fl;
        }

    ]]>
</mx:Script>
<controls:FlexBook width="400" height="200"
                   itemSize="halfPage">
    <controls:content>
        <mx:Image id="img" mouseDown="doDragStart(event)" /><!--source="@Embed('assets/Hawk.jpg')"-->
        <mx:Image id="img11" mouseDown="doDragStart(event)" /><!--source="@Embed('assets/Hawk.jpg')"-->
        <mx:Image id="img2" mouseDown="doDragStart(event)" /><!--source="@Embed('assets/Hawk.jpg')"-->
    </controls:content>
</controls:FlexBook>    
<mx:Canvas id="dropCanvas" width="100%" height="100%" borderColor="#1C5CC7" dragEnter="doDragEnter(event)" dragDrop="doDragDrop(event)"  borderStyle="solid" cornerRadius="20" borderThickness="6" backgroundColor="#7E92FC"/>
<!--<mx:Image id="dropImage" source="assets/1.swf" />-->

Valentin Smirnov Valentin Smirnov · Accepted Answer · 2012-10-07T14:16:06

I had a similar problem, the problem is in this line:

dragProxy.source = img1.source;

you should to copy bitmap img1 like here instead linking it.

Drag and Drop Image loaded by flex-loader. Original Source should not be removed

1 Answers