Build a Drag-and-Drop XML Image Viewer – DragManager

All of the informations about the images showcased in the gallery are stored in an XML file. Create an xml file that follows this structure and save it as datas.xml in the src directory :

<?xml   version="1.0"?>
<gallery>
	<image>marilyn1.jpg</image>
	<image>marilyn2.jpg</image>
	<image>marilyn3.jpg</image>
	<image>marilyn4.jpg</image>
	<image>marilyn5.jpg</image>
</gallery>
&lt;?xml   version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
&lt;mx:Application xmlns:mx=&quot;http://www.adobe.com/2006/mxml&quot; layout=&quot;vertical&quot;
	horizontalAlign=&quot;center&quot;
	backgroundGradientAlphas=&quot;[1.0,     1.0]&quot;
	backgroundGradientColors=&quot;[#FFFFFF, #FFFFFF]&quot;
	creationComplete=&quot;service.send()&quot;&gt;

	&lt;mx:Script&gt;
		&lt;![CDATA[
			import   mx.core.DragSource;
			import   mx.collections.ArrayCollection;
			import   mx.rpc.events.ResultEvent;
			import mx.events.DragEvent;
            import mx.managers.DragManager;

			[Bindable]
			private var   images:ArrayCollection;

			private   function serviceHandler(event:ResultEvent):void{
				images <a href="http://marvabrooks.com/images/">buy   viagra pill | where can i buy cialis | buy levitra online</a>    = event.result.gallery.image;
			}

			private   function initiateDrag(event:MouseEvent,value:String):void{

               	var dragInitiator:Image= event.currentTarget as Image;   

             	var dragSource:DragSource   = new DragSource();
                	dragSource.addData(value, 'value');

              	var dragProxy:Image = new Image();
                    	dragProxy.source <a href="http://jtc-enterprises.com/images/">buy viagra online order | buy cialis tadalafil | buy levitra vardenafil</a>    = event.currentTarget.source;
               	dragProxy.width = 100 ;
              	dragProxy.height   = 100 ;

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

			private function dragEnterHandler(event:DragEvent):void {
              var dropTarget:VBox =event.currentTarget   as VBox;
          	  if (event.dragSource.hasFormat('value')) {
                DragManager.acceptDragDrop(dropTarget);
                    }
              }

           	private function dragDropHandler(event:DragEvent):void     {
              var value:String = event.dragSource.dataForFormat('value') as String;
              bigImage.source = &quot;assets/big/&quot;+value;
                }

		]]&gt;
	&lt;/mx:Script&gt;

	&lt;mx:HTTPService id=&quot;service&quot;     url=&quot;datas.xml&quot; result=&quot;serviceHandler(event)&quot;/&gt;

	&lt;mx:Label   text=&quot;Drag a thumbnail image inside the black box and drop it to display its bigger version&quot;/&gt;

	&lt;mx:HBox&gt;
		&lt;mx:Repeater dataProvider=&quot;{images}&quot;   id=&quot;rep&quot;&gt;
			&lt;mx:Image source=&quot;assets/thumbs/{rep.currentItem}&quot;
				mouseMove=&quot;initiateDrag(event,event.currentTarget.getRepeaterItem())&quot;     /&gt;
		&lt;/mx:Repeater&gt;
	&lt;/mx:HBox&gt;

	&lt;mx:VBox   width=&quot;340&quot;     height=&quot;350&quot; backgroundColor=&quot;#000000&quot;
	      horizontalAlign=&quot;center&quot; verticalAlign=&quot;middle&quot;
	        dragEnter=&quot;dragEnterHandler(event)&quot;
	        dragDrop=&quot;dragDropHandler(event)&quot;&gt;
			&lt;mx:Image id=&quot;bigImage&quot; showBusyCursor=&quot;true&quot;/&gt;
	&lt;/mx:VBox&gt;

&lt;/mx:Application&gt;