Adobe Flex (v3) ile sürükle bırak
Adobe Flex (v3) ile sürükle bırak mantığının en basit örneğini vermeye çalıştım.
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>
Leave a Reply
Want to join the discussion?Feel free to contribute!