3 Replies Latest reply on Jun 28, 2010 6:38 AM by VRPDeveloper

    how can i hv a draggable and droppable tree control in flex?

    mithunda5011

      hi,

       

      this site is actually about creating a template.there has to be a tree control which the user can drag and drop on the template.how can i do this....thnx

        • 1. Re: how can i hv a draggable and droppable tree control in flex?
          VRPDeveloper Level 3

          Here m giving u an example of dragging tree control into convas...You can use in similar way...

           

          <?xml version="1.0"?>
          <!-- dragdrop\DandDImage.mxml -->
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

              <mx:Script>
                  <![CDATA[
                      //Import classes so you don't have to use full names.
                      import mx.managers.DragManager;
                      import mx.core.DragSource;
                      import mx.events.DragEvent;
                      import flash.events.MouseEvent;

                    

                      // The mouseMove event handler for the tree control
                      // initiates the drag-and-drop operation.
                      private function mouseMoveHandler(event:MouseEvent):void
                      {               
                          var dragInitiator:Tree=Tree(event.currentTarget);
                          var ds:DragSource = new DragSource();
                          ds.addData(dragInitiator, "tree");              

                          DragManager.doDrag(dragInitiator, ds, event);
                      }
                     
                      // The dragEnter event handler for the Canvas container
                      // enables dropping.
                      private function dragEnterHandler(event:DragEvent):void {
                          if (event.dragSource.hasFormat("tree"))
                          {
                              DragManager.acceptDragDrop(Canvas(event.currentTarget));
                          }
                      }

                      // The dragDrop event handler for the Canvas container
                      // sets the Tree control's position by
                      // "dropping" it in its new location.
                      private function dragDropHandler(event:DragEvent):void {
                          Tree(event.dragInitiator).x =
                              Canvas(event.currentTarget).mouseX;
                          Tree(event.dragInitiator).y =
                              Canvas(event.currentTarget).mouseY;
                      }
                  ]]>
              </mx:Script>
             
              <!-- The Canvas is the drag target -->
              <mx:Canvas id="v1"
                  width="500" height="500" 
                  borderStyle="solid"
                  backgroundColor="#DDDDDD"
                  dragEnter="dragEnterHandler(event);"
                  dragDrop="dragDropHandler(event);">
                 
                  <!-- The image is the drag initiator. -->
                  <mx:Tree id="mytree"
                     
                      mouseMove="mouseMoveHandler(event);"/>
              </mx:Canvas>
          </mx:Application>


          Hope you understood how to achieve your goal!!!
          • 2. Re: how can i hv a draggable and droppable tree control in flex?
            mithunda5011 Level 1

            thnx very much for ur reply ....when i ran this i got this..a.JPG

            i m very new in flex...dun know whether done something wrong...pls help

            • 3. Re: how can i hv a draggable and droppable tree control in flex?
              VRPDeveloper Level 3

              You need to specify dataprovider for tree ... I mean data to tree. I have just given you example .....indicating sample example.

              You need to modify it accordingly. More read http://livedocs.adobe.com/flex/3/html/help.html?content=dragdrop_7.html