4 Replies Latest reply on May 30, 2006 12:31 PM by Anurag Mishra

    Drag and Drop by design in Beta 3?

    Kwooda Level 1
      I am implementing a drag and drop operation whereby I want to drag an item from a DataGrid and hover over an accordion bar to have that bar open if you hover long enough. The problem is, the Accordion control does not have a dropEnabled attribute, and subsequently receives only (a ton of) dragEnter events and never a dragOver or a dragExit event. Only if a control has dropEnabled set to true will it receive (only one) dratEnter event, a slew of dragOver events, and one dragExit event. Why are the controls inconsistent in this regard, and how can I accomplish what I am trying to do if I have no way to capture a dragExit event on the accordion? Also, how do I detect which Accordion bar I am hovering over and open it programmatically?
        • 1. Re: Drag and Drop by design in Beta 3?
          poonamsheth Level 1
          hey my friend, just check in this example..
          its like u will understand the complete drag and drop sequence.
          its from documentation/..


          but there is a change in one statement from beta 2 to beta 3.
          for mx:controls.listclasses......
          which i changed it to mx:controls.*;
          ---------------------------------------
          main.mxml
          ---------------------------------------
          <?xml version="1.0"?>
          <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" width="500" height="620" borderStyle="solid" creationComplete="initApp();">

          <mx:Script>
          <![CDATA[
          import mx.events.DragEvent;
          import mx.controls.List;
          import mx.controls.*;
          import mx.managers.DragManager;
          import mx.core.DragSource;
          import mx.collections.IList;

          private var placeHolder bject = {label:"First", blah:"blah"};

          private function initApp():void {
          var dp:Array = ([
          {label:"First", data:"1"},
          {label:"Second", data:"2"},
          {label:"Third", data:"3"},
          {label:"Fourth", data:"4"},
          ]);
          firstList.dataProvider = dp;
          secondList.dataProvider = [];
          }

          private function doDragEnter(event ragEvent):void {
          var dragInitiator:List=List(event.currentTarget);
          tiEnter.text += "dragEnter triggered" + "\n";
          DragManager.acceptDragDrop(dragInitiator);
          }

          private function doDragOver(event ragEvent):void {
          tiOver.text += "dragOver triggered" + "\n";
          if (event.ctrlKey)
          DragManager.showFeedback(DragManager.COPY);
          else if (event.shiftKey)
          DragManager.showFeedback(DragManager.LINK);
          else
          DragManager.showFeedback(DragManager.MOVE);
          }

          private function doDragDrop(event ragEvent):void {
          var dropTarget:List=List(event.currentTarget);
          tiDrop.text += "dragDrop triggered" + "\n";
          doDragExit(event);
          var items:Array =event.dragSource.dataForFormat("items") as Array;
          var dropLoc:int = dropTarget.calculateDropIndex(event);

          tiDrop.text += "length: " + String(items.length) + "\n" +
          "dropLoc: " + String(dropLoc) + "\n" + "format: " +
          String(event.dragSource.formats[0])+ "\n";

          for(var i:uint=0; i < items.length; i++)
          {
          tiDrop.text += "\n" + "label: " + items .label + "\n" +
          String(dropLoc);
          IList(dropTarget.dataProvider).addItemAt(items
          , dropLoc );
          }
          }

          private function doDragComplete(event ragEvent):void {
          tiComplete.text += "dragComplete triggered" + "\n";
          }

          private function doDragExit(event ragEvent):void {
          var dropTarget:List=List(event.currentTarget);
          tiExit.text += "dragExit triggered" + "\n";
          dropTarget.hideDropFeedback(event);
          }
          ]]>
          </mx:Script>

          <mx:Label text="Drag items from left list to right list to see the
          triggered events."/>
          <mx:HBox>
          <mx:List id="firstList" dragEnabled="true"
          allowMultipleSelection="true" dragComplete="doDragComplete(event);" height="100"/>

          <mx:List id="secondList" dragEnter="doDragEnter(event);"
          dragExit="doDragExit(event);" dragOver="doDragOver(event);"
          dragDrop="doDragDrop(event);" dragEnabled="true" height="100"/>
          </mx:HBox>

          <mx:VBox horizontalAlign="right">
          <mx:HBox>
          <mx:Label text="dragEnter: "/>
          <mx:TextArea id="tiEnter" width="200" height="80"/>
          </mx:HBox>

          <mx:HBox>
          <mx:Label text="dragDrop: "/>
          <mx:TextArea id="tiDrop" width="200" height="200"/>
          </mx:HBox>

          <mx:HBox>
          <mx:Label text="dragOver: "/>
          <mx:TextArea id="tiOver" width="200" height="80"/>
          </mx:HBox>

          <mx:HBox>
          <mx:Label text="dragExit: "/>
          <mx:TextArea id="tiExit" width="200" height="80"/>
          </mx:HBox>

          <mx:HBox>
          <mx:Label text="dragComplete: "/>
          <mx:TextArea id="tiComplete" width="200" height="80"/>
          </mx:HBox>
          </mx:VBox>
          </mx:Application>

          bye.
          • 2. Re: Drag and Drop by design in Beta 3?
            poonamsheth Level 1
            u can also use class for drag and drop (i mean using custom class component)

            am attaching the code here.
            -----------
            Class.mxml
            -----------
            <?xml version="1.0"?>
            <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 {
            products.product={names: 'Siemens SX1', price: 99.99, image: 'assets/products/Siemens_SX1.png'};
            cart = new ArrayCollection();
            }
            private function doDragEnter(event ragEvent): void {
            if (event.dragSource.hasFormat("product"))
            {
            DragManager.acceptDragDrop(IUIComponent(event.target));
            event.preventDefault();
            }
            }


            private function doDragDrop(event ragEvent): void {

            var item = event.dragSource.dataForFormat("product");
            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%">

            <Product id="products"/>

            <mx ataGrid id="dg" dataProvider="{cart}"
            dragEnter="doDragEnter(event)"
            width="100%" height="100%"
            dragDrop="doDragDrop(event)">
            <mx:columns>
            <mx:Array>
            <mx ataGridColumn dataField="names" headerText="Product"/>
            <mx ataGridColumn dataField="price" headerText="Price"/>
            </mx:Array>
            </mx:columns>
            </mx ataGrid>

            </mx:HBox>

            </mx:Application>
            -------------------------------
            -------------
            Product.mxml
            ----------------

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

            <mx:VBox xmlns:mx=" http://www.adobe.com/2006/mxml"
            mouseMove="beginDrag(event)"
            paddingTop="4" paddingBottom="4"
            paddingLeft="4" paddingRight="4"
            borderStyle="solid" verticalAlign="middle"
            backgroundColor="#FFFFFF"
            width="170" height="130"
            horizontalScrollPolicy="off"
            verticalScrollPolicy="off">

            <mx:Script>

            import mx.managers.DragManager;
            [Bindable]
            public var product bject;
            [Bindable]
            public var names bject;
            [Bindable]
            public var image bject;
            [Bindable]
            public var price bject;

            public function beginDrag(event:MouseEvent):void {

            var ds = new mx.core.DragSource();
            ds.addData(product, "product");
            var proxy roduct = new Product(); //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="75" height="70"/>
            <mx:Label text="{product.names}" fontSize="11" fontWeight="bold"/>
            <mx:Label text="Price: ${product.price}"/>

            </mx:VBox>
            --------------------------
            • 3. Re: Drag and Drop by design in Beta 3?
              Anurag Mishra
              I had the same problem yesterday. I managed to enable the drag drop operation from a DataGrid to an Accordion bar.

              In your Accordion bar tag, you need to define dragEnter and dragDrop event
              The doDragEnter method is responsible for allowing or denying the drag drop operation by calling the DragManager.acceptDragDrop() method. Here's my code

              <mx:Accordion dragEnter="doDragEnter(event)" dragDrop="doDragDrop(event)" id="userSignup">

              private function doDragEnter(event : DragEvent) : void {
              var dropTarget:Accordion=Accordion(event.currentTarget);
              DragManager.acceptDragDrop(dropTarget);
              }

              private function doDragDrop(event : DragEvent) : void {
              mx.controls.Alert.show("something dropped" );
              }

              Import this file
              import mx.managers.DragManager;
              • 4. Re: Drag and Drop by design in Beta 3?
                Anurag Mishra Level 1
                The drag drop works fine now. But I dont know how to access the data I dragged from the DataGrid to the Accordion. Any help would be appreciated.

                Thanks