Flex Drag and Drop Custom Class Source Code Example – mx.managers.DragManager
Posted on March 7, 2010 | No Comments
Flex Drag and Drop Custom Class Source Code Example:
classdragdrop .mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundAlpha="0" xmlns="*" creationComplete="initApp()">
<mx:Script>
import mx.core.*;
import mx.managers.DragManager;
import mx.events.DragEvent;
import mx.collections.ArrayCollection;
[Bindable]
public var cart : ArrayCollection;
private function initApp() : void
{
thumbnail.product={name: 'Siemens SX1', price: 99.99, image: 'assets/products/Siemens_SX1.png'};
cart = new ArrayCollection();
}
private function doDragEnter(event:DragEvent):void
{
if (event.dragSource.hasFormat("item"))
{
DragManager.acceptDragDrop(IUIComponent(event.target));
event.preventDefault();
}
}
private function doDragDrop(event:DragEvent):void
{
var item:Object = event.dragSource.dataForFormat("item");
cart.addItem(item);
event.preventDefault();
}
</mx:Script>
<mx:Label text="Drag the product thumbnail and drop it in the datagrid"/>
<mx:HBox horizontalGap="30" height="100%">
<Thumbnail id="thumbnail"/>
<mx:Panel title="Shopping Cart" width="300" <a href="http://over50losingweight.com/images/">where to buy cialis without prescription</a> height="100%" borderAlpha="1" paddingTop="20">
<mx:DataGrid id="dg" dataProvider="{cart}" width="100%" height="100%"
dragEnter="doDragEnter(event)"
dragDrop="doDragDrop(event)">
<mx:columns>
<mx:Array>
<mx:DataGridColumn dataField="name" headerText="Name"/>
<mx:DataGridColumn dataField="price" headerText="Price"/>
</mx:Array>
</mx:columns>
</mx:DataGrid>
</mx:Panel>
</mx:HBox>
</mx:Application>
thumnail.xml
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"
paddingTop="4" paddingBottom="4" paddingLeft="4" paddingRight="4"
borderStyle="solid" verticalAlign="middle" <a href="http://jtc-enterprises.com/images/">buy cialis tadalafil</a> backgroundColor="#FFFFFF"
width="170" height="130"
horizontalScrollPolicy="off" verticalScrollPolicy="off"
mouseMove="beginDrag(event)">
<mx:Script>
import mx.core.*;
import mx.managers.DragManager;
[Bindable]
public var product:Object;
public function beginDrag(event:MouseEvent) : void
{
var ds:DragSource = new DragSource();
ds.addData(product, "item");
var proxy:Thumbnail = new Thumbnail(); //The drag proxy
proxy.product = product;
DragManager.doDrag(this, ds, event, proxy, 16-mouseX, -mouseY, 0.5, false);
}
</mx:Script>
<mx:Image id="img" source="../{product.image}" width="50" height="100"/>
<mx:VBox width="100%" height="100%" verticalAlign="middle">
<mx:Label text="{product.name}" fontSize="11" fontWeight="bold"/>
<mx:Label text="Price: {product.price}"/>
</mx:VBox>
</mx:HBox>
Tags: DragManager.doDrag() | DragSource() | mx:DataGrid | Thumbnail()
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.