Image Drag (Flex)

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#494747, #494747]" creationComplete="servicelis.send();">
<mx:Script>
    <![CDATA[
        import mx.core.UIComponent;
        import mx.events.DragEvent;
        import mx.containers.Panel;
        import mx.containers.Canvas;
        import mx.managers.DragManager;
        import mx.core.DragSource;
        import mx.controls.Image;
        import mx.controls.Alert;
        import mx.collections.ArrayCollection;
        import mx.rpc.events.ResultEvent;
       
        [Bindable]
        private var allimage:ArrayCollection=new ArrayCollection();
       
        private var newimg:Image;
        public var val:String=new String();
        private var deleteobj:Object=new Object();
        private var imglod:String;
        private function imageretrive(evt:ResultEvent):void
        {
            allimage=evt.result.imagelist.image;
        }
        private function callxml(xmlfile:String):void
        {
              servicelis.url=xmlfile;
              servicelis.send();
        }
       
        public function dodrag(evt:MouseEvent):void
        {
            var img:Image=evt.currentTarget as Image;
               /* var neimage:Image=new Image();
             neimage.source=img.source; */  
            var dodrg:DragSource=new DragSource();
            dodrg.addData(img, 'img');
            DragManager.doDrag(img,dodrg,evt);
            imglod=(evt.currentTarget as Image).source.toString();
           
           
        }
       
        private function dragAccept(event:DragEvent):void
       
        {
          var dropTarget:Canvas = event.currentTarget as Canvas;
          DragManager.acceptDragDrop(dropTarget);
        }
       
        private function dropimg(evt:DragEvent):void
        {
         newimg=new Image(); 
         can.addChild(newimg);
         newimg.source=imglod;
         newimg.x=can.mouseX;
         newimg.y=can.mouseY;
         newimg.name=val;
         newimg.addEventListener(MouseEvent.MOUSE_DOWN, startmove);
         newimg.addEventListener(MouseEvent.MOUSE_UP, stopmove);
         newimg.addEventListener(MouseEvent.CLICK, takeimage);
       
        }
        private function takeimage(evt:Event):void
        {
            deleteobj=evt.currentTarget as Image;
        }
       
        private function startmove(evt:MouseEvent):void
        {
            (evt.currentTarget as Image).startDrag();
        }
        private function stopmove(evt:MouseEvent):void
        {
            (evt.currentTarget as Image).stopDrag();
        }
   
        private function check():void
       
        {
            Alert.show(allimage.length.toString());
           
        }
       
        private function del(evt:Event):void
        {
       can.removeChild(deleteobj as Image);
        }
       
    ]]>
</mx:Script>

<mx:HTTPService id="servicelis" url="assets/imagelist.xml" result="imageretrive(event)"/>

       
   
    <mx:Canvas x="14" y="418" width="820" height="127" borderColor="#494B4C" backgroundColor="#8E8C8C">
        <mx:TileList x="6" y="6" dataProvider="{allimage}" itemRenderer="imgfile" labelField="title" width="809" height="116" backgroundColor="#8E8C8C">
       
        </mx:TileList>
    </mx:Canvas>

    <mx:Canvas x="14" y="23" width="820" id="can" height="377" dragEnter="dragAccept(event);" dragDrop="dropimg(event);" borderStyle="solid" borderColor="#8b8b8b" borderThickness="3" backgroundColor="#ffffff">
        <mx:Button width="50" height="30" click="check();" x="764" y="341">
           
        </mx:Button>
    </mx:Canvas>
    <mx:Panel x="838" y="23" width="166" height="522" layout="absolute">
        <mx:Button x="20" y="40" label="Natural" width="98" click="callxml('assets/imagelist.xml')"/>
        <mx:Button x="20" y="80" label="Animals " width="98" click="callxml('assets/imagelist1.xml')"/>
        <mx:Button x="20" y="120" label="Baby " width="98" click="callxml('assets/imagelist2.xml')"/>
        <mx:Button x="20" y="160" label="Delete " width="98" click="del(event);"/>
    </mx:Panel>
</mx:Application>

XML File

imagelist.xml 

<?xml version="1.0" encoding="iso-8859-1"?>
<imagelist>

<image>
<tiltle>Image1</tiltle>
<srcim>assets/images/img1.jpg</srcim>
</image>

<image>
<tiltle>Image2</tiltle>
<srcim>assets/images/img2.jpg</srcim>
</image>

<image>
<tiltle>Image3</tiltle>
<srcim>assets/images/img3.jpg</srcim>
</image>


<image>
<tiltle>Image4</tiltle>
<srcim>assets/images/img4.jpg</srcim>
</image>

<image>
<tiltle>Image5</tiltle>
<srcim>assets/images/img5.jpg</srcim>
</image>

<image>
<tiltle>Image3</tiltle>
<srcim>assets/images/img6.jpg</srcim>
</image>
<image>
<tiltle>Image4</tiltle>
<srcim>assets/images/img7.jpg</srcim>
</image>

</imagelist>

imagelist1.xml 

<?xml version="1.0" encoding="iso-8859-1"?>
<imagelist>

<image>
<tiltle>Image1</tiltle>
<srcim>assets/images/img11.jpg</srcim>
</image>

<image>
<tiltle>Image2</tiltle>
<srcim>assets/images/img21.jpg</srcim>
</image>

<image>
<tiltle>Image3</tiltle>
<srcim>assets/images/img31.jpg</srcim>
</image>


<image>
<tiltle>Image4</tiltle>
<srcim>assets/images/img41.jpg</srcim>
</image>


<image>
<tiltle>Image5</tiltle>
<srcim>assets/images/img51.jpg</srcim>
</image>

<image>
<tiltle>Image3</tiltle>
<srcim>assets/images/img61.jpg</srcim>
</image>


<image>
<tiltle>Image4</tiltle>
<srcim>assets/images/img71.jpg</srcim>
</image>

</imagelist>

imagelist2.xml 

<?xml version="1.0" encoding="iso-8859-1"?>
<imagelist>

<image>
<tiltle>Image1</tiltle>
<srcim>assets/images/img12.jpg</srcim>
</image>

<image>
<tiltle>Image2</tiltle>
<srcim>assets/images/img22.jpg</srcim>
</image>

<image>
<tiltle>Image3</tiltle>
<srcim>assets/images/img32.jpg</srcim>
</image>


<image>
<tiltle>Image4</tiltle>
<srcim>assets/images/img42.jpg</srcim>
</image>


<image>
<tiltle>Image5</tiltle>
<srcim>assets/images/img52.jpg</srcim>
</image>

<image>
<tiltle>Image3</tiltle>
<srcim>assets/images/img62.jpg</srcim>
</image>


<image>
<tiltle>Image4</tiltle>
<srcim>assets/images/img72.jpg</srcim>
</image>



</imagelist>

Your File Keep this Format

Out put