5 Replies Latest reply on Sep 29, 2010 7:21 PM by rui_yangrh

    Can't drag and drop in nested Group Container

    rui_yangrh

      I want to drag a component in a Group container which is nested in another Group container, but I found I can't do that. If I remove the parent group, drag operation is ok. And if I replace both Group container to BorderContainer, drag behaviour is normal, too. I'm confused with that problem. I use Group container because I wanna use Scroller to implement scrollbar function. My flex sdk version is 4.1. Are there any solutions? Thanks

        • 1. Re: Can't drag and drop in nested Group Container
          rui_yangrh Level 1

          Is there anyone meet this problem? I've no clue whether it is a bug of Flex 4 or Flex 4 is designed in this way?

          • 2. Re: Can't drag and drop in nested Group Container
            Flex harUI Adobe Employee

            Can you post a small test case?

            • 3. Re: Can't drag and drop in nested Group Container
              rui_yangrh Level 1

              Thanks for reply. Here is the test code

               

              <?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" width="800" height="600"
                             xmlns:view="org.bluewolf.topo.view.*" xmlns:ilog="http://www.ilog.com/2007/ilog/flex">
                  <s:layout>
                      <s:HorizontalLayout gap="0" paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0"/>
                  </s:layout>
                 
                  <fx:Script>
                      <![CDATA[
                          import mx.core.DragSource;
                          import mx.events.DragEvent;
                          import mx.managers.DragManager;
                         
                          private function onMouseMove(e:MouseEvent):void {
                              var di:Button = e.currentTarget as Button;
                              var ds:DragSource = new DragSource();
                              ds.addData(di, "dragTarget");
                              ds.addData({x:di.mouseX, y:di.mouseY}, "mouse");
                              DragManager.doDrag(di, ds, e);
                          }
                         
                          private function onDragEnter(e:DragEvent):void {
                              DragManager.acceptDragDrop(e.currentTarget as Group);
                          }
                         
                          private function onDragDrop(e:DragEvent):void {
                              var dataObj:Object = e.dragSource.dataForFormat("mouse");
                              var dragNode:Button = e.dragInitiator as Button;
                              dragNode.x = this.mouseX - dataObj.x;
                              dragNode.y = this.mouseY - dataObj.y;
                          }
                         
                      ]]>
                  </fx:Script>
                 
                  <fx:Declarations>
                  </fx:Declarations>
                 
                  <s:Scroller width="100%" height="100%">
                      <s:Group id="main" width="100%" height="100%">
                          <s:Group id="inner" width="100%" height="100%" dragEnter="onDragEnter(event)" dragDrop="onDragDrop(event)">
                              <s:Button width="100" height="50" id="b1" x="50" y="50" label="b1" mouseMove="onMouseMove(event)"/>
                          </s:Group>
                      </s:Group>
                  </s:Scroller>
              </s:Application>

               

              If I remove the "main" Group, drag operation is ok, but when I add the "main" Group, I can't drag the button any more. Hope these code is helpful.

              • 4. Re: Can't drag and drop in nested Group Container
                Anitha Selvaraj Level 2

                Try the below code.

                 

                <?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" width="800" height="600"
                               xmlns:view="org.bluewolf.topo.view.*" xmlns:ilog="http://www.ilog.com/2007/ilog/flex">
                    <s:layout>
                        <s:HorizontalLayout gap="0" paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0"/>
                    </s:layout>
                   
                    <fx:Script>
                        <![CDATA[
                            import mx.core.DragSource;
                            import mx.events.DragEvent;
                            import mx.managers.DragManager;
                           
                            private function onMouseMove(e:MouseEvent):void {
                                var di:Button = e.currentTarget as Button;
                                var ds:DragSource = new DragSource();
                                ds.addData(di, "dragTarget");
                                ds.addData({x:di.mouseX, y:di.mouseY}, "mouse");
                                DragManager.doDrag(di, ds, e);
                            }
                           
                            private function onDragEnter(e:DragEvent):void {
                                DragManager.acceptDragDrop(e.currentTarget as Group);
                            }
                           
                            private function onDragDrop(e:DragEvent):void {
                                var dataObj:Object = e.dragSource.dataForFormat("mouse");
                                var dragNode:Button = e.dragInitiator as Button;
                                dragNode.x = this.mouseX - dataObj.x;
                                dragNode.y = this.mouseY - dataObj.y;
                            }
                           
                        ]]>
                    </fx:Script>
                   
                    <fx:Declarations>
                    </fx:Declarations>
                   
                    <s:Scroller width="100%" height="100%">
                        <s:Group id="main" width="100%" height="100%" dragEnter="onDragEnter(event)" dragDrop="onDragDrop(event)">
                            <s:Group id="inner" width="100%" height="100%" >
                                <s:Button width="100" height="50" id="b1" x="50" y="50" label="b1" mouseMove="onMouseMove(event)"/>
                            </s:Group>
                        </s:Group>
                    </s:Scroller>
                </s:Application>

                 

                I have changed the code to listen for the dragEnter and dragDrop event for the parent group container.

                 

                Regards,

                Anitha

                • 5. Re: Can't drag and drop in nested Group Container
                  rui_yangrh Level 1

                  Cool, that works. Thanks dude.