Как изменить imagealpha для операции перетаскивания с множественным выбором в Flex - PullRequest
0 голосов
/ 05 декабря 2010

Вот код, позволяющий перетаскивать список из нескольких элементов в область дерева. То, что я хотел бы сделать, это изменить альфа изображения, которое перетаскивается. Я провел некоторое исследование, но большинство обсуждений там говорят о том, как изменить перетаскиваемое изображение. То, что я хочу сделать, это просто изменить альфа по умолчанию перетаскиваемого элемента с 0,5 до 0,2. Также это решение должно быть в состоянии обрабатывать многократное перетаскивание. Спасибо.

Ниже приведен простой пример перетаскивания, который я хотел бы изменить, чтобы учесть альфа-изменение перетаскиваемого элемента.

<?xml version="1.0" encoding="utf-8"?>

<s:layout>
    <s:VerticalLayout/>
</s:layout>

<fx:Declarations>
    <fx:XML id="treeData" xmlns="">
        <root>
            <node label="Massachusetts" type="state" data="MA">
                <node label="Boston" type="city" >
                    <node label="Smoke House Grill" type="restaurant" />
                    <node label="Equator" type="restaurant" />
                    <node label="Aquataine" type="restaurant" />
                    <node label="Grill 23" type="restaurant" />
                </node>
                <node label="Provincetown" type="city" >
                    <node label="Lobster Pot" type="restaurant" />
                    <node label="The Mews" type="restaurant" />
                </node>
            </node>
            <node label="California" type="state" data="CA">
                <node label="San Francisco" type="city" >
                    <node label="Frog Lane" type="restaurant" />
                </node>
            </node>
        </root>
    </fx:XML>   
    <fx:Array id="listData">
        <fx:String>Johnny Rocket's</fx:String>
        <fx:String>Jet Pizza</fx:String>
        <fx:String>Steve's Greek</fx:String>
        <fx:String>Sonsie</fx:String>
        <fx:String>The Border Cafe</fx:String>
    </fx:Array>     
</fx:Declarations>

<fx:Script>
    <![CDATA[
        import mx.events.DragEvent;
        import mx.managers.DragManager;
        import mx.core.DragSource;
        import mx.core.UIComponent;
        import mx.controls.Tree;
        /**
         * Called as soon as the dragProxy enters the target. You can add logic
         * to determine if the target will accept the drop based on the
         * dragInitiator, the data available in the dragSource, or whatever.
         * Here the drop is blindly accepted.
         */
        private function onDragEnter( event:DragEvent ) : void
        {
            DragManager.acceptDragDrop(UIComponent(event.currentTarget));
        }
        /**
         * Called while the dragProxy is over the drop target. You can
         * use this function to determine the type of feedback to show.
         * Because the List is set to allow MOVE (the item is deleted
         * once dropped), different feedback possibilities are given.
         *
         * Also, for this application, the Tree control node the dragProxy is
         * over is selected. As the dragProxy moves, the Tree control's
         * selection changes.
         *
         * A complexity in this application is that the drop is being allowed
         * only over nodes whose type is NOT 'state'.
         * The feedback is removed.
         */
        private function onDragOver( event:DragEvent ) : void {
            var dropTarget:Tree = Tree(event.currentTarget);
            var r:int = dropTarget.calculateDropIndex(event);
            tree.selectedIndex = r;
            var node:XML = tree.selectedItem as XML;
            if ( node.@type == "state" ) {
                DragManager.showFeedback(DragManager.NONE);
                return;
            }
            if (event.ctrlKey)
                DragManager.showFeedback(DragManager.COPY);
            else if (event.shiftKey)
                DragManager.showFeedback(DragManager.LINK);
            else {
                DragManager.showFeedback(DragManager.MOVE);
            }
        }
        /**
         * Called when the dragProxy is released
         * over the drop target. The information in the dragSource
         * is extracted and processed.
         *
         * The target node is determined and 
         * all of the data selected (the List has allowMultipleSection
         * set) is added.
         */
        private function onDragDrop( event:DragEvent ) : void {
            var ds:DragSource = event.dragSource;
            var dropTarget:Tree = Tree(event.currentTarget);
            var items:Array = ds.dataForFormat("items") as Array;
            var r:int = tree.calculateDropIndex(event);
            tree.selectedIndex = r;
            var node:XML = tree.selectedItem as XML;
            var p:*;
            /* If the selected node has children (it is type==city),
            then add the items at the beginning. */
            if ( tree.dataDescriptor.hasChildren(node) ) {
                p = node;
                r = 0;
            } else {
                p = node.parent();
            }
            for (var i:Number=0; i < items.length; i++) {
                var insert:XML = <node />;
                insert.@label = items[i];
                insert.@type  = "restaurant";
                tree.dataDescriptor.addChildAt(p, insert, r+i);
            }
        }
        /**
         * Called when the drag operation completes, whether 
         * successfully or not. The tree is cleared of its
         * selection.
         */
        private function onDragComplete( event:DragEvent ) : void {
            tree.selectedIndex = -1;
        }       
    ]]>
</fx:Script>    

<s:Panel x="48" y="125" width="447" height="351" title="Drag onto Tree"> 
    <mx:Tree width="186" left="10" top="10" bottom="10" id="tree"
             labelField="@label"
             dataProvider="{treeData.node}"
             dropEnabled="false"
             dragMoveEnabled="false"
             dragEnter="onDragEnter(event)"
             dragOver="onDragOver(event)"
             dragDrop="onDragDrop(event)">
    </mx:Tree>      
    <mx:List width="188" height="206" right="10" bottom="10" id="list"
             allowMultipleSelection="true"
             dataProvider="{listData}"
             dragEnabled="true"
             dragMoveEnabled="true"
             dragComplete="onDragComplete(event)">
    </mx:List>      
    <s:Label x="229" y="10" text="Drag from the list below to the tree" 
             width="188" height="39"/>
    <s:Label x="229" y="69" text="restaurants"/>
</s:Panel> 

1 Ответ

1 голос
/ 05 декабря 2010

Прежде всего - я бы настоятельно рекомендовал бы использовать элементы управления списком искры вместо элементов управления MX.Элементы управления свечей ведут себя гораздо более предсказуемо.

Следующее относится к элементам управления свечами - оно может работать с элементами управления mx, но YMMV.

Вы устанавливаете альфапрокси при вызове DragManager.doDrag(...) ( см. apache aliveocs .

Компоненты списка вызывают для вас DragManager.doDrag(), когда вы устанавливаете dragEnagled="true". Вы можете переопределить это и вызвать егоВы сами обрабатываете событие dragStart.

Итак, при заданном элементе управления списком искр, например:

<s:List
    id="list"
    dataProvider="{listData}" 
    allowMultipleSelection="true"
    dragEnabled="true"
    dragMoveEnabled="true"
    dragComplete="onDragComplete(event)"    

    dragStart="list_dragStartHandler(event)" />

Ваш обработчик dragStart может выглядеть так:

protected function list_dragStartHandler(event:DragEvent):void
{
    if( event.dragSource ) {
        // under some conditions, this event fires multiple times,
        // we only care about it, if the dragSource isn't set yet.
        return;
    }
    event.preventDefault();

    // create the drag source, and stuff it into the event
    // 
    var dragSource:DragSource = new DragSource();
    event.dragSource = dragSource;

    // let the spark list control add the default data formats
    list.addDragData(dragSource);

    // you can add your own data formats here
    // by calling `dragSource.addHandler(...)`

    // now, tell DragManager to initiate the drag
    // 
    DragManager.doDrag(
        event.dragInitiator, dragSource, event, 
        list.createDragIndicator(),  
        0, 0,        /* offsets: x,y */
        0.2,         /* imageAlpha */
        list.dragMoveEnabled
    );
}

Обратите внимание, что imageAlpha является последним последним параметром вызова DragManager.doDrag(...)

...