3 Replies Latest reply on Aug 18, 2008 10:38 PM by rohitmarathe

    Drag and drop in same container

    rohitmarathe
      I am having a Vbox and have number of panels inside it.
      I need to add a drag and drop facility to my VBox so that using my mouse, I can change the order of panels in my Vbox.
        • 1. Re: Drag and drop in same container
          ntsiii Level 3
          You will probably want to use the container's swapChildren() method.
          Tracy
          • 2. Drag and drop in same container
            rohitmarathe Level 1
            Hey thanks Tracy. Here is an another method.
            <?xml version="1.0" encoding="utf-8"?>
            <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="vertical">
            <mx:Script>
            <![CDATA[
            import mx.effects.easing.Back;
            import mx.containers.HBox;
            import mx.containers.Box;
            import mx.controls.Alert;
            import mx.core.IUIComponent;
            import mx.events.DragEvent;
            import mx.managers.DragManager;
            import mx.core.DragSource;
            import mx.collections.ArrayCollection;
            private var mouseIsDown:Boolean=false;
            private var accWin:TitleWindow;
            private var atLeastOneNotVis:Boolean=false;

            private var graphData:ArrayCollection = new ArrayCollection();
            private function toggleChartAndCb(graphWin:TitleWindow,
            graphCb:CheckBox, show:Boolean):void{
            graphCb.selected = show;
            this.toggleChart(graphWin,show);
            }

            private function toggleChart(graphWin:TitleWindow, show:Boolean):void{
            if(show){
            graphWin.visible=true;
            graphWin.height=150;
            }else{
            graphWin.visible=false;
            graphWin.height=0;
            }
            }

            private function dragInit(graphWin:TitleWindow,graphData:ArrayCollection,
            event:MouseEvent,dataFormat:String):void{
            if(mouseIsDown){
            var ds:DragSource=new DragSource();
            ds.addData(graphData,dataFormat);
            DragManager.doDrag(graphWin,ds,event);
            }
            }

            private function handleDragEnter(event:DragEvent,dataFormat:String):void{
            if(event.dragSource.hasFormat(dataFormat)){
            DragManager.acceptDragDrop(IUIComponent(event.target));
            }
            }
            private function handleDragDrop(acceptor:TitleWindow):void{
            accWin=acceptor;
            }
            private function handleDragComplete(event:DragEvent):void{
            var initWin:TitleWindow = event.dragInitiator as TitleWindow;
            if(accWin!=null && accWin!=initWin){
            var initWinIdx:Number = initWin.parent.getChildIndex(initWin);
            var accWinIdx:Number = accWin.parent.getChildIndex(accWin);
            //same parents, just flip
            if(accWin.parent==initWin.parent){
            accWin.parent.setChildIndex(accWin,initWinIdx);
            accWin.parent.setChildIndex(initWin,accWinIdx);
            }
            //not same parent
            else{
            var initChildArr:Array=(Box(initWin.parent)).getChildren();
            var initChildSibling:DisplayObject;
            for each(var initChild:DisplayObject in initChildArr){
            if(initChild.name!=initWin.name){
            initChildSibling = initChild;
            break;
            }
            }

            var initWinRef:DisplayObject=
            initChildSibling.parent.removeChild(initWin);
            accWin.parent.addChildAt(initWinRef,accWinIdx);
            var accWinRef:DisplayObject =
            accWin.parent.removeChild(accWin);
            initChildSibling.parent.addChildAt(accWinRef,initWinIdx);
            }
            }
            }
            override public function localToContent(point:Point):Point{
            return point;
            }
            private function checkAndHandleDE(event:DragEvent,cont:Box,dataFormat:String):void{
            if(event.dragSource.hasFormat(dataFormat)){
            var childArr:Array=cont.getChildren();
            var atLeastOneNotVis:Boolean=false;

            for each(var currChild:TitleWindow in childArr){
            if(!currChild.visible){
            atLeastOneNotVis=true;
            break;
            }
            }
            if(atLeastOneNotVis){
            DragManager.acceptDragDrop(IUIComponent(event.target));
            }
            }
            }
            private function checkAndHandleDD(event:DragEvent,cont:Box):void{
            var childArr:Array=cont.getChildren();
            for each(var currChild:TitleWindow in childArr){
            if(!currChild.visible){
            accWin=currChild;
            break;
            }
            }

            }
            ]]>
            </mx:Script>
            <!--Checkboxes-->

            <!--I have used checkboxes to show that the panels can be toggled-->
            <mx:Panel width="100%" horizontalAlign="center" layout="horizontal">
            <mx:CheckBox id="panel1Cb" change="toggleChart(panel1, panel1Cb.selected)"
            label="Panel 1" selected="true"/>
            <mx:CheckBox id="panel2Cb" label="Panel 2" selected="true"
            change="toggleChart(panel2, panel2Cb.selected)"/>
            <mx:CheckBox id="panel3Cb" label="Panel 3" selected="true"
            change="toggleChart(panel3, panel3Cb.selected)"/>
            <mx:CheckBox id="panel4Cb" label="Panel 4" selected="true"
            change="toggleChart(panel4, panel4Cb.selected)"/>
            <mx:CheckBox id="panel5Cb" label="Panel 5" selected="true"
            change="toggleChart(panel5, panel5Cb.selected)"/>
            <mx:CheckBox id="panel6Cb" label="Panel 6" selected="true"
            change="toggleChart(panel6, panel6Cb.selected)"/>
            <mx:CheckBox id="panel7Cb" label="Panel 7" selected="true"
            change="toggleChart(panel7, panel7Cb.selected)"/>
            <mx:CheckBox id="panel8Cb" label="Panel 8" selected="true"
            change="toggleChart(panel8, panel8Cb.selected)"/>
            <mx:CheckBox id="panel9Cb" label="Panel 9" selected="true"
            change="toggleChart(panel9, panel9Cb.selected)"/>
            </mx:Panel>
            <!--Graph Panel-->

            <!--For each row add an HBox and keep the number of containers same. You just have to change the id of the container and references to it in various events-->
            <mx:HBox id="upperBox" mouseDown="{mouseIsDown=true}" mouseUp="{mouseIsDown=false}"
            dragEnter="checkAndHandleDE(event,upperBox,'objFormat')" width="100%"
            dragDrop="checkAndHandleDD(event,upperBox)">
            <mx:TitleWindow id="panel1" title="Panel 1" showCloseButton="true"
            close="toggleChartAndCb(panel1,panel1Cb,false)" width="100%" height="150"
            mouseMove="dragInit(panel1,graphData,event,'objFormat')"
            dragEnter="handleDragEnter(event,'objFormat')"
            dragDrop="handleDragDrop(panel1)"
            dragComplete="handleDragComplete(event)"/>
            <mx:TitleWindow id="panel2" title="Panel 2" showCloseButton="true"
            close="toggleChartAndCb(panel2,panel2Cb,false)" width="100%" height="150"
            mouseMove="dragInit(panel2,graphData,event,'objFormat')"
            dragEnter="handleDragEnter(event,'objFormat')"
            dragDrop="handleDragDrop(panel2)"
            dragComplete="handleDragComplete(event)"/>



            contied... to next message
            • 3. Re: Drag and drop in same container
              rohitmarathe Level 1
              <mx:TitleWindow id="panel3" title="Panel 3" showCloseButton="true"
              close="toggleChartAndCb(panel3,panel3Cb,false)"
              mouseMove="dragInit(panel3,graphData,event,'objFormat')"
              dragEnter="handleDragEnter(event,'objFormat')" width="100%" height="150"
              dragDrop="handleDragDrop(panel3)"
              dragComplete="handleDragComplete(event)"/>
              </mx:HBox>
              <mx:HBox id="middleBox" mouseDown="{mouseIsDown=true}" mouseUp="{mouseIsDown=false}"
              width="100%" dragEnter="checkAndHandleDE(event,middleBox,'objFormat')"
              dragDrop="checkAndHandleDD(event,middleBox)">
              <mx:TitleWindow id="panel4" title="Panel 4" showCloseButton="true"
              close="toggleChartAndCb(panel4,panel4Cb,false)" width="100%" height="150"
              mouseMove="dragInit(panel4,graphData,event,'objFormat')"
              dragEnter="handleDragEnter(event,'objFormat')"
              dragComplete="handleDragComplete(event)"
              dragDrop="handleDragDrop(panel4)"/>
              <mx:TitleWindow id="panel5" title="Panel 5" showCloseButton="true"
              close="toggleChartAndCb(panel5,panel5Cb,false)"
              mouseMove="dragInit(panel5,graphData,event,'objFormat')"
              dragEnter="handleDragEnter(event,'objFormat')" width="100%" height="150"
              dragDrop="handleDragDrop(panel5)"
              dragComplete="handleDragComplete(event)"/>
              <mx:TitleWindow id="panel6" title="Panel 6" showCloseButton="true"
              close="toggleChartAndCb(panel6,panel6Cb,false)" width="100%" height="150"
              mouseMove="dragInit(panel6,graphData,event,'objFormat')"
              dragEnter="handleDragEnter(event,'objFormat')"
              dragComplete="handleDragComplete(event)"
              dragDrop="handleDragDrop(panel6)"/>
              </mx:HBox>
              <mx:HBox id="lowerBox" mouseDown="{mouseIsDown=true}" mouseUp="{mouseIsDown=false}"
              width="100%" dragEnter="checkAndHandleDE(event,lowerBox,'objFormat')"
              dragDrop="checkAndHandleDD(event,lowerBox)">
              <mx:TitleWindow id="panel7" title="Panel 7" showCloseButton="true"
              close="toggleChartAndCb(panel7,panel7Cb,false)" width="100%" height="150"
              mouseMove="dragInit(panel7,graphData,event,'objFormat')"
              dragEnter="handleDragEnter(event,'objFormat')"
              dragComplete="handleDragComplete(event)"
              dragDrop="handleDragDrop(panel7)"/>
              <mx:TitleWindow id="panel8" title="Panel 8" showCloseButton="true"
              close="toggleChartAndCb(panel8,panel8Cb,false)"
              mouseMove="dragInit(panel8,graphData,event,'objFormat')"
              dragEnter="handleDragEnter(event,'objFormat')" width="100%" height="150"
              dragDrop="handleDragDrop(panel8)"
              dragComplete="handleDragComplete(event)"/>
              <mx:TitleWindow id="panel9" title="Panel 9" showCloseButton="true"
              close="toggleChartAndCb(panel9,panel9Cb,false)" width="100%" height="150"
              mouseMove="dragInit(panel9,graphData,event,'objFormat')"
              dragEnter="handleDragEnter(event,'objFormat')"
              dragComplete="handleDragComplete(event)"
              dragDrop="handleDragDrop(panel9)"/>
              </mx:HBox>
              </mx:Application>