flex drag

mxml文件：

<?xml version="1.0" encoding="utf-8"?>
<control:Test5 xmlns:fx="http://ns.adobe.com/mxml/2009"
                  xmlns:s="library://ns.adobe.com/flex/spark"
                  xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:components="components.*" xmlns:control="components.control.*">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <s:Panel id="a" x="57" y="46" width="250" height="200">
        <s:layout>
            <s:TileLayout/>
        </s:layout>
        <s:Button label="2"/>
        <s:Button label="3"/>
        <s:Button label="4"/>
        <s:Button label="5"/>
        <s:Button label="6"/>
        <s:Button label="7"/>
        <s:Button label="8"/>
        <s:Button label="9"/>
        <s:Button label="1"/>
    </s:Panel>
    <s:Panel id="b" x="352" y="46" width="250" height="200">
        <s:layout>
            <s:TileLayout/>
        </s:layout>
    </s:Panel>
</control:Test5>

ac文件：

package components.control
{
    import flash.events.MouseEvent;

    import mx.core.DragSource;
    import mx.core.UIComponent;
    import mx.events.DragEvent;
    import mx.events.FlexEvent;
    import mx.managers.DragManager;
    import mx.preloaders.Preloader;

    import spark.components.Panel;
    import spark.components.Application;

    public class Test5 extends Application
    {
        public var a:Panel;
        public var b:Panel;

        public function Test5()
        {
            super();
            addEventListener(FlexEvent.CREATION_COMPLETE, creationCompleteHandler);
        }

        protected function creationCompleteHandler(event:FlexEvent):void
        {
            for(var i:int  = 0; i < a.numElements; i++)
            {
                a.getElementAt(i).addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
            }
            a.addEventListener(DragEvent.DRAG_ENTER, dragEnterHandler);
            a.addEventListener(DragEvent.DRAG_DROP, dragDropHandler);
            b.addEventListener(DragEvent.DRAG_ENTER, dragEnterHandler);
            b.addEventListener(DragEvent.DRAG_DROP, dragDropHandler);
        }

        private static function mouseDownHandler(event:MouseEvent):void
        {
            var dragInitiator:UIComponent = UIComponent(event.currentTarget);
            var ds:DragSource = new DragSource();
            ds.addData(dragInitiator, "myRule");
            DragManager.doDrag(dragInitiator, ds, event);
        }

        private static function dragEnterHandler(event:DragEvent):void
        {
            if (event.dragSource.hasFormat("myRule"))
            {
                DragManager.acceptDragDrop(UIComponent(event.currentTarget));
            }
        }

        private static function dragDropHandler(event:DragEvent):void
        {
            var dragObject:UIComponent = UIComponent(event.dragInitiator);
            Panel(event.currentTarget).addElement(dragObject);
        }
    }
}

flex裏面主要經過

• DragManager：mx.managers 包中，管理拖拽事件
• DragSource：mx.core 包中，是Flex 框架的核心成員，處理拖拽中的數據傳遞
• DragEvent:：mx.events 包中，拖拽操做中的事件對象

來實現拖拽的功能。