Changing live dragging on a TileList control in Flex

The following example shows how you can enable or disable live dragging on a Flex TileList control by setting the liveDragging property. Full code after the jump. <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:ArrayCollection id="arrColl"> <mx:source> <mx:Array> <mx:Object label="ColdFusion" icon="@Embed('assets/cf_appicon-tn.gif')" /> <mx:Object label="Dreamweaver" icon="@Embed('assets/dw_appicon-tn.gif')" /> <mx:Object label="Fireworks" icon="@Embed('assets/fw_appicon-tn.gif')" /> <mx:Object label="Flash" icon="@Embed('assets/fl_appicon-tn.gif')" /> <mx:Object label="Flash Player" icon="@Embed('assets/fl_player_appicon-tn.gif')" /> <mx:Object label="Flex" icon="@Embed('assets/fx_appicon-tn.gif')" /> <mx:Object label="Illustrator" icon="@Embed('assets/ai_appicon-tn.gif')" /> <mx:Object label="Lightroom" icon="@Embed('assets/lr_appicon-tn.gif')" /> <mx:Object label="Photoshop" icon="@Embed('assets/ps_appicon-tn.gif')" /> <mx:Object label="ColdFusion" icon="@Embed('assets/cf_appicon-tn.gif')" /> <mx:Object label="Dreamweaver" icon="@Embed('assets/dw_appicon-tn.gif')" /> <mx:Object label="Fireworks" icon="@Embed('assets/fw_appicon-tn.gif')" /> <mx:Object label="Flash" icon="@Embed('assets/fl_appicon-tn.gif')" /> <mx:Object label="Flash Player" icon="@Embed('assets/fl_player_appicon-tn.gif')" /> <mx:Object label="Flex" icon="@Embed('assets/fx_appicon-tn.gif')" /> <mx:Object label="Illustrator" icon="@Embed('assets/ai_appicon-tn.gif')" /> <mx:Object label="Lightroom" icon="@Embed('assets/lr_appicon-tn.gif')" /> <mx:Object label="Photoshop" icon="@Embed('assets/ps_appicon-tn.gif')" /> </mx:Array> </mx:source> </mx:ArrayCollection> <mx:ApplicationControlBar dock="true"> <mx:Form styleName="plain"> <mx:FormItem label="liveScrolling:"> <mx:CheckBox id="checkBox" creationComplete="checkBox.selected = tileList.liveScrolling;" /> </mx:FormItem> </mx:Form> </mx:ApplicationControlBar> <mx:TileList id="tileList" dataProvider="{arrColl}" alternatingItemColors="[#FFFFFF,#EEEEEE]" columnCount="3" columnWidth="100" rowCount="2" rowHeight="100" direction="horizontal" verticalScrollPolicy="on" liveScrolling="{checkBox.selected}" /> </mx:Application>

Flex Drag and Drop Custom Class Source Code Example:

Creat a New mxml file:

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" 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" 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>

Flex Drag and Drop Source Code Example:

Flex Drag and Drop Grid Example Source Code Example:

Creat a New mxml file:
dragging .mxml

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundAlpha="0" horizontalAlign="center" creationComplete="initApp()"> <mx:Script> <![CDATA[ import mx.collections.ArrayCollection; import mx.managers.DragManager; import mx.events.DragEvent; [Bindable] public var dataSrc:ArrayCollection; [Bindable] public var dataDest:ArrayCollection; public function initApp():void { srv.send(); dataDest = new ArrayCollection(); } ]]> </mx:Script> <mx:HTTPService id="srv" url="../assets/catalog.xml" result="dataSrc = new ArrayCollection(srv.lastResult.catalog.product)"/> <mx:Text width="100%" textAlign="center"> <mx:text> You can drag and drop rows from one datagrid to the other. Use the Ctrl or Shift keys to select multiple rows in a datagrid. While dragging, press the CTRL key to copy rows from one datagrid to the other (rows are moved by default). </mx:text> </mx:Text> <mx:HBox width="100%" height="100%" horizontalGap="10"> <mx:DataGrid dataProvider="{dataSrc}" width="100%" height="100%" allowMultipleSelection="true" dragEnabled="true" dropEnabled="true" dragMoveEnabled="true"> <mx:columns> <mx:Array> <mx:DataGridColumn dataField="name" headerText="Name"/> <mx:DataGridColumn dataField="price" headerText="Price"/> </mx:Array> </mx:columns> </mx:DataGrid> <mx:DataGrid dataProvider="{dataDest}" width="100%" height="100%" allowMultipleSelection="true" dragEnabled="true" dropEnabled="true" dragMoveEnabled="true"> <mx:columns> <mx:Array> <mx:DataGridColumn dataField="name" headerText="Name"/> <mx:DataGridColumn dataField="price" headerText="Price"/> </mx:Array> </mx:columns> </mx:DataGrid> </mx:HBox> </mx:Application>