Build a Drag-and-Drop XML Image Viewer – DragManager
Posted on May 2, 2010 | No Comments
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>
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
horizontalAlign="center"
backgroundGradientAlphas="[1.0, 1.0]"
backgroundGradientColors="[#FFFFFF, #FFFFFF]"
creationComplete="service.send()">
<mx:Script>
<![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 = "assets/big/"+value;
}
]]>
</mx:Script>
<mx:HTTPService id="service" url="datas.xml" result="serviceHandler(event)"/>
<mx:Label text="Drag a thumbnail image inside the black box and drop it to display its bigger version"/>
<mx:HBox>
<mx:Repeater dataProvider="{images}" id="rep">
<mx:Image source="assets/thumbs/{rep.currentItem}"
mouseMove="initiateDrag(event,event.currentTarget.getRepeaterItem())" />
</mx:Repeater>
</mx:HBox>
<mx:VBox width="340" height="350" backgroundColor="#000000"
horizontalAlign="center" verticalAlign="middle"
dragEnter="dragEnterHandler(event)"
dragDrop="dragDropHandler(event)">
<mx:Image id="bigImage" showBusyCursor="true"/>
</mx:VBox>
</mx:Application>
Tags: currentTarget | Drag-and-Drop | dragDrop | dragEnter | DragManager.acceptDragDrop() | DragManager.doDrag() | Image() | mx:HTTPService | mx:Repeater | XML
Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.
Comments
Leave a Reply
You must be logged in to post a comment.
Community presentations of the blogger
Sameera at LinkedIn
BIOGRAPHY
Sameera Thilakasiri is a front-end developer and UX Architect based in Colombo, Sri Lanka, specialist in User Interface Design, User Experience, Usability and Accessibility, Information Architecture, Responsive Web Design, Interactive Design, Search Engine Optimization, Trainging and Public Speaking.
In his profession, follow the best practices, W3C web standards and guidelines, responsive, semantic, usable, accessible, SEO friendly to cutting edge cording using XHTML/HTML5, CSS and jQuery for Pixel-perfect cross browser compatibility.
In his leisure blogging for technical articles and lifestyle photographer.