1
我有一個簡單的拖放操作，並希望更改匹配上放置目標的狀態。它按預期工作，但在那裏狀態變回正常狀態（或者itemrenderer正在刷新）。我猜測有一個覆蓋，我需要做，或需要標記它不刷新，但沒有運氣。dragDrop刷新itemrenderer的當前狀態事件
有什麼想法？
MXML
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:local="*">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:layout>
<s:VerticalLayout gap="20" />
</s:layout>
<s:DataGroup itemRenderer="renderer.myRenderer" >
<s:layout>
<s:HorizontalLayout />
</s:layout>
<s:dataProvider>
<s:ArrayCollection>
<local:DragValueObject name="A" value="A"/>
<local:DragValueObject name="B" value="B"/>
<local:DragValueObject name="C" value="C"/>
</s:ArrayCollection>
</s:dataProvider>
</s:DataGroup>
<s:DataGroup itemRenderer="renderer.DropRenderer">
<s:layout>
<s:HorizontalLayout />
</s:layout>
<s:dataProvider>
<s:ArrayCollection>
<local:DragValueObject name="Banana" value="B"/>
<local:DragValueObject name="Apple" value="A"/>
<local:DragValueObject name="Carret" value="C"/>
</s:ArrayCollection>
</s:dataProvider>
</s:DataGroup>
</s:Application>
將引發項渲染
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" mouseDown="mouseMoveHandler(event)"
autoDrawBackground="false" creationComplete="init()">
<s:states>
<s:State name="normal" />
<s:State name="hovered" />
<s:State name="dragging"/>
</s:states>
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
@font-face {
src: url("../assets/HelveticaLight.ttf");
fontFamily: "myMyriadFont";
embedAsCFF: true;
}
.italicFontStyle {
fontFamily: myMyriadFont;
fontLookup: embeddedCFF;
fontSize: 34;
}
</fx:Style>
<fx:Script>
<![CDATA[
import mx.core.DragSource;
import mx.core.IUIComponent;
import mx.core.UIComponent;
import mx.events.DragEvent;
import mx.managers.DragManager;
import spark.components.Group;
import spark.filters.DropShadowFilter;
private function handleDragComplete(evt:DragEvent):void
{
this.visible = false;
}
private function init():void
{
//this.addEventListener(DragEvent.DRAG_DROP, handleDragComplete)
}
// Initializes the drag and drop operation.
private function mouseMoveHandler(event:MouseEvent):void
{
// this.visible = false;
// Get the drag initiator component from the event object.
var dragInitiator:IUIComponent=event.currentTarget as IUIComponent;
// Create a DragSource object.
var ds:DragSource = new DragSource();
ds.addData(data.value, 'dragData');
//create a proxy by creating a new "copy" of the drag src
var className:String = getQualifiedClassName(dragInitiator);
var klass:Class = getDefinitionByName(className) as Class;
var proxy:* = new klass();
//set the proxy's properties to match the src + sexy drop shadow
proxy.width = dragInitiator.width;
proxy.height = dragInitiator.height;
//proxy.fillColor = (dragInitiator as IDraggableGraphic).fillColor;
proxy.filters = [new spark.filters.DropShadowFilter];
// Add the data to the object.
/*
if(_dropTargetElement){
ds.addData(_dropTargetElement.id, 'dragID');
ds.addData(_dropTargetElement.data, 'data');
}else{
ds.addData(null, 'dragID');
ds.addData(null, 'data');
}
//*/
// Call the DragManager doDrag() method to start the drag.
DragManager.doDrag(dragInitiator, ds, event,proxy,0,0,1,true);
}
]]>
</fx:Script>
<s:Rect left="0" right="0" top="0" bottom="-1" includeIn="normal">
<s:stroke>
<s:SolidColorStroke color="0xff0000" weight="1"/>
</s:stroke>
<s:fill>
<s:SolidColor color="0xff0000"/>
</s:fill>
</s:Rect>
<s:Rect left="0" right="0" top="0" bottom="-1" includeIn="hovered">
<s:stroke>
<s:SolidColorStroke color="0x00ff00" weight="1"/>
</s:stroke>
<s:fill>
<s:SolidColor color="0x00ff00"/>
</s:fill>
</s:Rect>
<s:Rect left="0" right="0" top="0" bottom="-1" includeIn="dragging">
<s:stroke>
<s:SolidColorStroke color="0x0000ff" weight="1"/>
</s:stroke>
<s:fill>
<s:SolidColor color="0x0000ff"/>
</s:fill>
</s:Rect>
<s:SkinnableContainer id="container" backgroundColor="#183759">
<s:Label styleName="italicFontStyle" text="{data.name}" paddingLeft="5" paddingBottom="5" paddingRight="5" paddingTop="5"/>
</s:SkinnableContainer>
</s:ItemRenderer>
DropTargets項渲染
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" dragEnter="handleDragEnter(event)" dragDrop="handleDragDrop(event)" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"
autoDrawBackground="false">
<s:states>
<s:State name="normal" />
<s:State name="correct" />
<s:State name="wrong"/>
</s:states>
<fx:Script>
<![CDATA[
import mx.core.IUIComponent;
import mx.events.DragEvent;
import mx.managers.DragManager;
private var _dataValue:String;
private function handleDragEnter(event:DragEvent):void
{
if (event.dragSource.hasFormat('dragData')) {
var dropTarget:IUIComponent = IUIComponent(event.currentTarget);
_dataValue = data.value;
DragManager.acceptDragDrop(dropTarget);
}
}
private function handleDragDrop(event:DragEvent):void
{
if(event.dragSource.dataForFormat("dragData") == _dataValue){
this.currentState = "correct";
event.dragInitiator.x = this.x;
event.dragInitiator.y = this.y;
}else{
this.currentState = "wrong";
}
}
]]>
</fx:Script>
<s:SkinnableContainer backgroundColor.normal="#0000FF" backgroundColor.correct="#00FF00" backgroundColor.wrong="#FF0000">
<s:Label text="{data.name} is {data.value}" paddingLeft="5" paddingBottom="5" paddingRight="5" paddingTop="5"/>
</s:SkinnableContainer>