itemrenderer 的 CurrentState 在拖放事件上刷新

Question

我有一个简单的拖放操作，并且想要更改匹配上放置目标的状态。它按预期工作，但随后状态更改回正常（或者 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>

Answer 1

重写项目渲染器中的 getCurrentRendererState() 并在需要时返回 “正确” 状态。