拖放效果:
a) List组件有内置的拖放功能,只要设置dragEnabled="true",再在接受数据的List组件中设置dropEnabled="true"
<?xml version="1.0" encoding="utf-8"?>
<mx:Application layout="absolute"
xmlns:mx="http://www.adobe.com/2006/mxml"
width="450" height="350"
creationComplete="initApp();"
backgroundColor="#FFFFFF">
<mx:Script>
<![CDATA[
// setup 3 dataProviders, 2 empty
private function initApp():void{
words.dataProvider = ['Water', 'Agua', 'Car', 'Coche', 'House', 'Casa', 'Book', 'Libro', 'Music', 'Música', 'Sandwich', 'Bocadillo'];
english.dataProvider = [];
spanish.dataProvider = [];
}
]]>
</mx:Script>
<mx:Panel title="Sort Words By Language" layout="absolute" x="0" y="0" width="450" height="350">
<mx:Label text="Drag to the Correct Language" x="7" y="3"/>
<mx:List id="words" width="200" height="275"
allowMultipleSelection="true"
dragEnabled="true" y="25" x="7"/>
<mx:Label text="English" y="6" x="223"/>
<mx:List id="english" width="200" height="120"
dropEnabled="true" y="25" x="223"/>
<mx:Label text="Spanish" x="223" y="150"/>
<mx:List id="spanish" width="200" height="120"
dropEnabled="true" y="177" x="223"/>
</mx:Panel>
</mx:Application>
b) 其它组件的拖放支持
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="450" height="300"
creationComplete="initApp()" paddingLeft="0" paddingTop="0">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.events.DragEvent;
import mx.managers.DragManager;
import mx.core.DragSource;
[Bindable]
public var total:Number = 0;
[Bindable]
public var cartContents:ArrayCollection;
private function initApp():void{
this.cartContents = new ArrayCollection();
}
private function dragIt(event:MouseEvent, name:String, price:Number):void {
// The currentTarget specifies the component initiating the drag.
var dragInitiator:Image = event.currentTarget as Image;
// Create a new DragSource object containing the data being dragged
var dragSource:DragSource = new DragSource();
// Add the data to the object.
dragSource.addData(name, 'name');
dragSource.addData(price, 'price');
// Create a copy of the image to use as a drag proxy.
var dragProxy:Image = new Image();
dragProxy.source = event.currentTarget.source;
// Call the DragManager doDrag() method to start the drag.
DragManager.doDrag(dragInitiator, dragSource, event, dragProxy);
}
// Called if the user drags a drag proxy onto the drop target.
private function dragEnterHandler(event:DragEvent):void {
// Get the drop target component from the event object.
var dropTarget:DataGrid=event.currentTarget as DataGrid;
// Accept the drag only if the object contains the correct data
if (event.dragSource.hasFormat('name') && event.dragSource.hasFormat('price')){
// Accept the drop.
DragManager.acceptDragDrop(dropTarget);
}
}
// Called if used drops the object over the target and the target accepts the object
private function dragDropHandler(event:DragEvent):void {
// Set the data from the dragSource to local vars.
var name:String = String(event.dragSource.dataForFormat('name')) ;
var price:Number = Number(event.dragSource.dataForFormat('price')) ;
this.cartContents.addItem({name:String(event.dragSource.dataForFormat('name')),price:Number(event.dragSource.dataForFormat('price'))});
// Add the price to the total
total += price;
}
]]>
</mx:Script>
<mx:Canvas width="100%" height="100%" backgroundColor="#FFFFFF">
<mx:Image source="yankee.jpg" mouseMove="dragIt(event, 'Yankee hat', 19.99);" x="23" y="35"/>
<mx:Label text="$ 19.99" x="53" y="215"/>
<mx:Image source="mets.jpg" mouseMove="dragIt(event, 'Met hat', 19.99);" x="23" y="135"/>
<mx:Label text="$ 19.99" x="53" y="109"/>
<mx:Label text="Shopping Cart" x="226" y="28" fontWeight="bold"/>
<mx:DataGrid id="cart" dataProvider="{cartContents}" dragEnter="dragEnterHandler(event);" dragDrop="dragDropHandler(event);" x="175" y="50" height="165">
<mx:columns>
<mx:DataGridColumn dataField="name" headerText="Name" />
<mx:DataGridColumn dataField="price" headerText="Price" />
</mx:columns>
</mx:DataGrid>
<mx:Label text="Total: $ {total}" x="215" y="222"/>
<mx:Label x="93.5" y="2" text="Drag a product into the shopping cart"/>
<mx:HRule x="5" y="20" width="390"/>
</mx:Canvas>
</mx:Application>
posted on 2011-03-15 16:10
长春语林科技 阅读(211)
评论(0) 编辑 收藏 所属分类:
flex