实现页签可拖拽

实现类似于遨游的页签可拖拽有几个要点，继承页签的父类，刷新数据源，拖拽管理器的综合使用，数组的插删技巧。

 

package view.components

{

    import flash.events.MouseEvent;

   

    import mx.collections.ArrayCollection;

    import mx.collections.IList;

    import mx.core.DragSource;

    import mx.core.UIComponent;

    import mx.events.CollectionEvent;

    import mx.events.DragEvent;

    import mx.events.FlexEvent;

    import mx.managers.DragManager;

   

    import spark.components.TabBar;

    import spark.layouts.HorizontalLayout;

   

    import view.components.TabBarItemRenderer4;

 

    /**

     * Dragable and Draopable TabBar

     * @author 黄记新

     */

    public class SuperTabBar extends TabBar

    {

       //Indicate if tabbar item is dragable;

       private var _dragEnabled:Boolean;

       /**

        *

        * @default

        */

       protected var dragEnabledChanged:Boolean;

 

       private var _dropEnabled:Boolean;

 

       /**

        *

        * @default

        */

       protected var dataProviderChanged:Boolean;

 

       /**

        *

        */

       public function SuperTabBar()

       {

           //TODO: implement function

           super();

 

           //Add the CREATION_COMPLETE event listener

           addEventListener(FlexEvent.CREATION_COMPLETE, onCreationComplete);

       }

 

       /**

        * Event handler for CREATION_COMPLETE event;

        * @param event

        */

       private function onCreationComplete(event:FlexEvent):void

       {

           removeEventListener(FlexEvent.CREATION_COMPLETE, onCreationComplete);

 

           updateListeners();

       }

 

       /**

        * Used to update event listeners

        */

       private function updateListeners():void

       {

           for (var i:int=0; i < this.dataGroup.numElements; i++)

           {

              var tabItem:UIComponent=UIComponent(this.dataGroup.getElementAt(i));

              if (dragEnabled && dropEnabled)

              {

                  addDragListeners(tabItem);

                  addDropListeners(tabItem);

              }

              else

                  removeDragListeners(tabItem);

           }

       }

 

       /**

        * Add relative draging event listeners

        * @param tabItem

        */

       private function addDropListeners(tabItem:UIComponent):void

       {

           tabItem.addEventListener(DragEvent.DRAG_ENTER, tabDragEnter, false, 0, true);

           tabItem.addEventListener(DragEvent.DRAG_OVER, tabDragOver, false, 0, true);

           tabItem.addEventListener(DragEvent.DRAG_DROP, tabDragDrop, false, 0, true);

           tabItem.addEventListener(DragEvent.DRAG_EXIT, tabDragExit, false, 0, true);

       }

 

       /**

        * Event handler for DRAG_ENTER event

        * @param event

        */

       private function tabDragEnter(event:DragEvent):void

       {

           if (event.dragSource.hasFormat('tabDrag') && event.dragInitiator != event.currentTarget)

           {

              DragManager.acceptDragDrop(UIComponent(event.target));

           }

       }

 

       /**

        *

        * @param event

        */

       private function tabDragOver(event:DragEvent):void

       {

           if (event.dragSource.hasFormat('tabDrag'))

           {

              var dropTab:UIComponent=(event.currentTarget as UIComponent);

              var dropIndex:Number=this.dataGroup.getElementIndex(dropTab);

           }

       }

 

       /**

        *

        * @param event

        */

       private function tabDragDrop(event:DragEvent):void

       {

           if (event.dragSource.hasFormat('tabDrag') && event.draggedItem != event.dragInitiator)

           {

              var dropTab:UIComponent=(event.currentTarget as UIComponent); //newTabItem

              var dragTab:UIComponent=(event.dragInitiator as UIComponent); //oldTabItem

 

              var oldIndex:Number=this.dataGroup.getElementIndex(dragTab);

              var newIndex:Number=this.dataGroup.getElementIndex(dropTab);

 

              if (oldIndex > newIndex)

              {

                  var object:Object=this.dataProvider.getItemAt(oldIndex);

                  this.dataProvider.addItemAt(object, newIndex);

                  this.dataProvider.removeItemAt(oldIndex + 1);

              }

              else

              {

                  var object1:Object=this.dataProvider.getItemAt(oldIndex);

                  this.dataProvider.removeItemAt(oldIndex);

                  this.dataProvider.addItemAt(object1, newIndex);

              }

 

 

              this.selectedIndex=newIndex;

             

              //In the next rendering, commitProperties method will be invoked.

              dataProviderChanged=true;

              invalidateProperties();

           }

       }

 

       /**

        *

        * @param event

        */

       private function tabDragExit(event:DragEvent):void

       {

 

       }

      

       /**

        *

        * @param tabbarItemRender

        */

       private function addDragListeners(tabbarItemRender:UIComponent):void

       {

           tabbarItemRender.addEventListener(MouseEvent.MOUSE_DOWN, tabbarItemMouseDownHandler);

           //         tabbarItemRender.addEventListener(MouseEvent.MOUSE_UP, tabbarItemMouseUpHandler);

       }

      

       /**

        *

        * @param event

        */

       private function tabbarItemMouseUpHandler(event:MouseEvent):void

       {

           UIComponent(event.currentTarget).removeEventListener(MouseEvent.MOUSE_DOWN, tabbarItemMouseDownHandler);

          

       }

      

       /**

        *

        * @param event

        */

       private function doDrag(event:MouseEvent):void

       {

           if (event.currentTarget is UIComponent)

           {

              var ds:DragSource=new DragSource();

              ds.addData(event.currentTarget, 'tabDrag');

             

              UIComponent(event.currentTarget).removeEventListener(MouseEvent.MOUSE_MOVE, doDrag);

             

              DragManager.doDrag(UIComponent(event.currentTarget), ds, event);

           }

       }

      

       /**

        *

        * @param event

        */

       private function tabbarItemMouseDownHandler(event:MouseEvent):void

       {

           UIComponent(event.currentTarget).addEventListener(MouseEvent.MOUSE_MOVE, doDrag);

       }

      

       /**

        *

        * @param tabbarItemRender

        */

       private function removeDragListeners(tabbarItemRender:UIComponent):void

       {

           tabbarItemRender.removeEventListener(MouseEvent.MOUSE_DOWN, tabbarItemMouseDownHandler);

           tabbarItemRender.removeEventListener(MouseEvent.MOUSE_UP, tabbarItemMouseUpHandler);

       }

 

       //_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

       //_/_/

       //_/_/ setter and getter methods

       //_/_/

       //_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

       /**

        *

        * @return

        */

       public function get dropEnabled():Boolean

       {

           return _dropEnabled;

       }

 

       /**

        *

        * @param value

        */

       public function set dropEnabled(value:Boolean):void

       {

           _dropEnabled=value;

       }

 

       /**

        *

        * @return

        */

       public function get dragEnabled():Boolean

       {

           return _dragEnabled;

       }

 

       /**

        *

        * @param value

        */

       public function set dragEnabled(value:Boolean):void

       {

           if (_dragEnabled == value)

           {

              return;

           }

 

           _dragEnabled=value;

           dragEnabledChanged=true;

           invalidateProperties();

       }

 

       //_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

       //_/_/

       //_/_/ override methods

       //_/_/

       //_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/

 

       /**

        *

        */

       override protected function commitProperties():void

       {

           super.commitProperties();

 

           if (dataProviderChanged)

           {

              dataProviderChanged=false;

 

              updateListeners();

           }

          

       }

 

    }

}