2 Replies Latest reply on Jun 18, 2008 4:05 AM by Isaac Fung

    Customising Drag Proxy Images

    Isaac Fung Level 1
      I got a few draggable images that can be moved around the application and are droppable in designated area. However, when the images are outside the droppable area, flex by default attaches a 'little red coloured cross on the images. I found this little thing very annoying and want to get rid of it. Any suggestion welcome.
        • 1. Re: Customising Drag Proxy Images
          atta707 Level 2
          DragManager.showFeedback(DragManager.NONE);
          • 2. Re: Customising Drag Proxy Images
            Isaac Fung Level 1
            Hi, the little cross is still there (please see the following code). Where should I put the extra line of code?

            <?xml version="1.0" encoding="utf-8"?>
            <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" width="700" height="500" layout="absolute" >
            <mx:Script>
            <![CDATA[
            import mx.events.DragEvent;
            import mx.managers.DragManager;
            import mx.core.DragSource;

            [Embed("assets/DragTest/Circle.png")]
            [Bindable]
            public var Circle:Class;

            [Embed("assets/DragTest/Square.png")]
            [Bindable]
            public var Square:Class;

            [Embed("assets/DragTest/Star.png")]
            [Bindable]
            public var Star:Class;

            [Embed("assets/DragTest/Triangle.png")]
            [Bindable]
            public var Triangle:Class;


            private function dragIt(event:MouseEvent, text:String, format:String):void
            {

            var dragInitiator:Image = event.currentTarget as Image;

            var dragSource:DragSource = new DragSource();
            dragSource.addData(text, format);

            var dragProxy:Image = new Image();
            dragProxy.source = event.currentTarget.source;

            DragManager.showFeedback(DragManager.NONE);
            DragManager.doDrag(dragInitiator, dragSource, event, dragProxy);

            }

            private function doDragEnter(event:DragEvent):void {

            var dropTarget:Image=Image(event.currentTarget);

            if (event.dragSource.hasFormat('shape')) {
            DragManager.acceptDragDrop(dropTarget);
            }
            }

            private function doDragDrop(event:DragEvent):void {

            var data:String = event.dragSource.dataForFormat('shape') as String;

            if (data == 'triangle') {
            q_feedback.text = 'You got it!';
            }
            if (data == 'circle') {
            q_feedback.text = 'Oop! This is a circle';
            }
            if (data == 'star') {
            q_feedback.text = 'Oop! This is a star';
            }
            if (data == 'square') {
            q_feedback.text = 'Oop! This is a square';
            }
            }

            ]]>
            </mx:Script>

            <mx:Image id="answer1" source="{Circle}" mouseMove="dragIt(event, 'circle', 'shape');" x="180" y="400"/>
            <mx:Image id="answer2" source="{Square}" mouseMove="dragIt(event, 'square', 'shape');" x="260" y="400"/>
            <mx:Image id="answer3" source="{Star}" mouseMove="dragIt(event, 'star', 'shape');" x="340" y="400"/>
            <mx:Image id="answer4" source="{Triangle}" mouseMove="dragIt(event, 'triangle', 'shape');"
            x="420" y="400"/>

            <mx:Image id="answerBox" source="assets/DragTest/Box.png" x="496" y="378"
            dragEnter="doDragEnter(event);" dragDrop="doDragDrop(event);"/>

            <mx:Label id="q_feedback" x="209" y="307" text="Drag a triangle into the box" width="350" fontSize="23"/>

            </mx:Application>