flex拖動技術彙總

Flex元件内置了處理拖拽事件的接口，有些控件已經實作了拖拽功能，比如List、DataGrid、Menu、

HorizontalList、 PrintDataGrid、TileList、Tree，在設定相關的拖拽屬性後，它們都可以在相同類型的組

件之間利用滑鼠來實作資料的轉移。

allowDragSelection 是否可以拖選

allowMultipleSelection 是否可以多選

dragEnabled 是否可以拖動子元素

dragMoveEnabled 是否移動元素位置，而不是複制元素

dropEnabled 是否可以将物體放置進來

在Flex中，有幾個專門的對象供開發者處理拖拽事件：

DragManager：位于mx.managers包中，管理拖拽事件

DragSource：位于mx.core包中，是Flex架構中的核心成員，處理拖拽中的資料傳遞

DragEvent：位于mx.events包中，拖拽操作中的事件對象。

按照邏輯，拖拽中至少有兩個對象：一方提供資料，一方接收資料。在這個過程中，提供資料的一方按照前後順序，可以把整個過程劃分為下面幾個事件：

mouseDown：滑鼠按下。

mouseMove：滑鼠移動。

dragComplate：滑鼠釋放。判斷目标是否接受資料，如果可以，拖放成功。

接收方也将經曆幾個階段

dragEnter：被拖動對象移動到目标範圍中。

dragDrop：滑鼠在目标上松開。

dragOver：滑鼠移動到目标上。

dragExit：獨享被拖離目标範圍。

1. Tree與Tree之間的拖動：

Xml代碼

<?xml version="1.0" encoding="utf-8"?>  
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  
                layout="vertical"  
                verticalAlign="middle">  
  
    <mx:XML id="myData">  
        <data>  
            <item label="ActionScript">  
                <item label="Flash"/>  
                <item label="Flex"/>  
            </item>  
            <item label="Mirage">  
            </item>  
            <item label="JavaScript"/>  
        </data>  
    </mx:XML>  
  
    <mx:XML id="copyData">  
        <data>  
            <item label="JavaScript"/>  
        </data>  
    </mx:XML>  
  
    <mx:Tree dropEnabled="true"  
             dragEnabled="true"  
             dragMoveEnabled="true"  
             allowMultipleSelection="true"  
             dataProvider="{myData.item}"  
             labelField="@label"/>  
  
    <mx:Tree dropEnabled="true"  
             dataProvider="{copyData.item}"  
             labelField="@label"/>  
</mx:Application>

上面代碼中隻需設定

dropEnabled="true" //是否可以将被拖動的物體放置進來

dragEnabled="true" //是否可以拖動子元素

dragMoveEnabled="true" //是否隻是移動元素，而不是複制元素

allowMultipleSelection="true" //是否可以多項拖動元素,為true時可以用ctrl選多個一起拖動

List與List之間的拖動，隻要設定上面的就可以了。

DataGrid 拖動到DataGrid和List

Xml代碼

<?xml version="1.0" encoding="utf-8"?>  
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  
                layout="vertical"  
                verticalAlign="middle"  
                fontSize="12">  
  
    <mx:Script>  
        <![CDATA[  
            import mx.collections.ArrayCollection;  
            import mx.events.DragEvent;  
 
            [Bindable]  
            private var mylist:ArrayCollection;  
 
            //當拖完成時  
            private function onDrop(e:DragEvent):void  
            {  
                var myData:Object=new Object();  
                myData=e.dragSource.dataForFormat('items'); //從dragSource中拿到條目  
                var name:String=myData[0].name; //注意這個地方必需要用變量進行替換  
                list1.dataProvider.addItem(name);  
                e.preventDefault(); //可以去掉預設的資料轉移  
            }  
        ]]>  
    </mx:Script>  
  
    <mx:XMLList id="employees">  
        <employee>  
            <name>劉海</name>  
            <phone>13042334532</phone>  
            <email>[email protected]</email>  
        </employee>  
        <employee>  
            <name>張春</name>  
            <phone>13642987532</phone>  
            <email>[email protected]</email>  
        </employee>  
        <employee>  
            <name>小李</name>  
            <phone>13923485844</phone>  
            <email>[email protected]</email>  
        </employee>  
    </mx:XMLList>  
  
    <mx:DataGrid x="10"  
                 y="15"  
                 width="277"  
                 id="dg"  
                 rowCount="5"  
                 dataProvider="{employees}"  
                 dragEnabled="true">  
        <mx:columns>  
            <mx:DataGridColumn headerText="Name"  
                               dataField="name"/>  
            <mx:DataGridColumn headerText="Email"  
                               dataField="email"/>  
            <mx:DataGridColumn headerText="Phone"  
                               dataField="phone"/>  
        </mx:columns>  
    </mx:DataGrid>  
  
    <mx:DataGrid dropEnabled="true">  
        <mx:columns>  
            <mx:DataGridColumn headerText="Name"  
                               dataField="name"/>  
            <mx:DataGridColumn headerText="Email"  
                               dataField="email"/>  
            <mx:DataGridColumn headerText="Phone"  
                               dataField="phone"/>  
        </mx:columns>  
    </mx:DataGrid>  
  
    <mx:List height="210"  
             width="206"  
             id="list1"  
             dropEnabled="true"  
             dataProvider="{mylist}"  
             dragDrop="onDrop(event)">  
    </mx:List>  
  
    <!--文檔注釋-->  
    <mx:TextInput width="500"  
                  height="146"  
                  horizontalCenter="0"  
                  verticalCenter="-204"  
                  fontWeight="normal"  
                  textAlign="center">  
  
        <mx:htmlText>  
            <![CDATA[  
                Date: 2009.05.05  
                Email:[email protected]  
                QQ:1019822077  
                Blog:  
                <font color="#FF0000">  
                   <a href="http://hi.baidu.com/woaidelphi/blog/category/Flex" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >  
                          http://hi.baidu.com/woaidelphi/blog/category/Flex  
                   </a>  
                </font>  
                  華夏之星希望和你成為朋友。一起學習，共同奮鬥!!!。。。  
            ]]>  
        </mx:htmlText>  
    </mx:TextInput>  
</mx:Application>

2.非加強拖動技術

Label的拖動，可以擴充到其他元件

Xml代碼

<?xml version="1.0" encoding="utf-8"?>  
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" fontSize="12">  
<mx:Script>  
    <![CDATA[  
        import mx.collections.ArrayCollection;  
        import mx.core.IUIComponent;  
        import mx.events.DragEvent;  
        import mx.core.DragSource;  
        import mx.managers.DragManager;  
        
        [Bindable]  
        private var listData:ArrayCollection = new ArrayCollection();  
        //拖動初始器  
        private function dragSource(myData:String,e:MouseEvent,format:String):void  
        {  
           var iu:IUIComponent = e.currentTarget as IUIComponent;  
            var ds : DragSource = new DragSource();  
            ds.addData(myData,format);//設定一個标号format  
            DragManager.doDrag(iu,ds,e); // 開始拖動這個物體  
        }  
        //當拖進去時  
        private function onEnter( e:DragEvent,format:String ) : void  
        {  
            if(e.dragSource.hasFormat(format))//如果标号為format則接受拖來的物體  
            {  
                DragManager.acceptDragDrop(IUIComponent(e.target) );// 接受被拖進來的物體        
 
    
            }  
        }  
        //當拖完成時  
        private function onDrop(e:DragEvent,format:String) : void  
        {  
            var myData:Object = new Object();  
            myData = e.dragSource.dataForFormat(format);  
            list1.dataProvider.addItem(myData);//list1是List的id,要是擴充到其他元件，改這裡就可以了。  
        }  
    ]]>  
    </mx:Script>  
    <mx:Label text="拖動我到List" width="86" height="27" id="lbl" mouseDown="dragSource('這個是一個label',event,'stringFormat')"/>  
    <mx:List dataProvider="{listData}" id="list1" dragEnter="onEnter(event,'stringFormat')"  
        dragDrop="onDrop(event,'stringFormat')" width="206">  
    </mx:List>  
        <!--文檔注釋-->  
    <mx:TextInput width="500" height="146" horizontalCenter="0" verticalCenter="-204"  
        fontWeight="normal" textAlign="center">  
    <mx:htmlText>  
        <![CDATA[  
             Date: 2009.05.05  
             Email:[email protected]  
             QQ:1019822077  
             Blog:<font color="#FF0000">  
             <a href="http://hi.baidu.com/woaidelphi/blog/category/Flex" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >  
                http://hi.baidu.com/woaidelphi/blog/category/Flex  
             </a>  
             </font>  
             華夏之星希望和你成為朋友。一起學習，共同奮鬥!!!。。。  
        ]]>  
    </mx:htmlText>  
    </mx:TextInput>  
</mx:Application>

Button的拖動，可以擴充到其他元件

Xml代碼

<?xml version="1.0" encoding="utf-8"?>  
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  
                layout="vertical"  
                verticalAlign="middle"  
                fontSize="12">  
    <mx:Script>  
        <![CDATA[  
            import mx.core.IUIComponent;  
            import mx.events.DragEvent;  
            import mx.core.DragSource;  
            import mx.managers.DragManager;  
 
            //拖動初始器  
            private function dragSource(e:MouseEvent, format:String):void  
            {  
                var iu:IUIComponent=e.currentTarget as IUIComponent;  
                var ds:DragSource=new DragSource();  
                ds.addData({"x": e.localX, "y": e.localY}, format); //設定一個标号format  
                DragManager.doDrag(iu, ds, e);  
            }  
 
            //當拖進去時  
            private function onEnter(e:DragEvent, format:String):void  
            {  
                if (e.dragSource.hasFormat(format)) //如果标号為format則接受拖來的物體  
                {  
                    DragManager.acceptDragDrop(IUIComponent(e.target));  
                }  
            }  
 
            //當拖完成時  
            private function onDrop(e:DragEvent, format:String):void  
            {  
                var myData:Object=new Object();  
                myData=e.dragSource.dataForFormat(format);  
                btn.x=this.mouseX - myData.x; //btn為按鈕的id,要是擴充到其他元件，改這裡就可以了。  
                btn.y=this.mouseY - myData.y;  
            }  
        ]]>  
    </mx:Script>  
    <mx:Canvas y="40"  
               id="cansAccess"  
               backgroundColor="#000000"  
               width="300"  
               height="200"  
               dragEnter="onEnter(event,'formatString')"  
               dragDrop="onDrop(event,'formatString')"/>  
    <mx:Button id="btn"  
               label="拖動我到面闆"  
               mouseDown="dragSource(event,'formatString')"/>  
    <!--文檔注釋-->  
    <mx:TextInput width="500"  
                  height="146"  
                  horizontalCenter="0"  
                  verticalCenter="-204"  
                  fontWeight="normal"  
                  textAlign="center">  
        <mx:htmlText>  
            <![CDATA[  
             Date: 2009.05.05  
             Email:[email protected]  
             QQ:1019822077  
             Blog:<font color="#FF0000">  
             <a href="http://hi.baidu.com/woaidelphi/blog/category/Flex" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >  
                http://hi.baidu.com/woaidelphi/blog/category/Flex  
             </a></font>  
             華夏之星希望和你成為朋友。一起學習，共同奮鬥!!!。。。  
        ]]>  
        </mx:htmlText>  
    </mx:TextInput>  
  
</mx:Application>

一定要注意，标簽的先後位置，Button 要在Canvas 之後.

3.Canvas容器中拖動Box,你還可以在Box中添加圖檔等。

Xml代碼

<?xml version="1.0" encoding="utf-8"?>  
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  
                layout="absolute"  
                fontSize="12">  
    <mx:Script>  
        <![CDATA[  
            import mx.containers.Box;  
            import mx.containers.Canvas;  
            import mx.core.IUIComponent;  
            import mx.events.DragEvent;  
            import mx.managers.DragManager;  
            import mx.core.DragSource;  
 
            //拖動初始器  
            private function dragSource(e:MouseEvent, format:String):void  
            {  
                var iu:IUIComponent=e.currentTarget as IUIComponent;  
                var ds:DragSource=new DragSource();  
                ds.addData(iu, format); //設定一個标号format  
                DragManager.doDrag(iu, ds, e); // 開始拖動這個物體  
            }  
 
            //當拖進去時  
            private function onEnter(e:DragEvent, format:String):void  
            {  
                if (e.dragSource.hasFormat(format)) //如果标号為format則接受拖來的物體  
                {  
                    DragManager.acceptDragDrop(IUIComponent(e.target)); // 接受被拖進來的物體        
                }  
            }  
 
            //當拖完成時  
            private function onDrop(e:DragEvent, format:String):void  
            {  
                var box:Box=Box(e.dragInitiator); //如果擴充到其他元件，改這裡Box就可以了。  
                box.x=e.localX;  
                box.y=e.localY;  
            }  
        ]]>  
    </mx:Script>  
  
    <mx:Canvas backgroundColor="0xEEEEEE"  
               width="500"  
               height="246"  
               horizontalCenter="0"  
               verticalCenter="0"  
               dragEnter="onEnter(event,'boxFormat')"  
               dragDrop="onDrop(event,'boxFormat')">  
        <mx:Box id="boxDrag"  
                width="20"  
                height="20"  
                backgroundColor="0x00FFCC"  
                x="97"  
                y="47"  
                mouseDown="dragSource(event,'boxFormat');">  
        </mx:Box>  
    </mx:Canvas>  
    <!--文檔注釋-->  
    <mx:TextInput width="500"  
                  height="146"  
                  horizontalCenter="0"  
                  verticalCenter="-204"  
                  fontWeight="normal"  
                  textAlign="center">  
        <mx:htmlText>  
            <![CDATA[  
             Date: 2009.05.05  
             Email:[email protected]  
             QQ:1019822077  
             Blog:<font color="#FF0000">  
             <a href="http://hi.baidu.com/woaidelphi/blog/category/Flex" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >  
                http://hi.baidu.com/woaidelphi/blog/category/Flex  
             </a></font>  
               華夏之星希望和你成為朋友。一起學習，共同奮鬥!!!。。。  
        ]]>  
        </mx:htmlText>  
    </mx:TextInput>  
</mx:Application>

4.圖檔的拖動

Xml代碼

<?xml version="1.0" encoding="utf-8"?>  
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  
                layout="vertical"  
                width="100%"  
                height="100%"  
                fontSize="12">  
    <mx:Script>  
        <![CDATA[  
            private var oldX:Number; //拖動開始是的坐标  
            private var oldY:Number;  
 
            //拖動開始  
            private function dragStart(event:MouseEvent):void  
            {  
                oldX=event.stageX; //相對Application的坐标  
                oldY=event.stageY;  
            }  
 
            //拖動結束  
            private function dragEnd(event:MouseEvent):void  
            {  
                lbl.text="Local (x,y):" + event.localX.toString() + "," + event.localX.toString(); //相對圖檔的坐标  
                lbl2.text="Stage (x,y):" + event.stageX.toString() + "," + event.stageY.toString(); //相對Application的坐标  
                if (event.buttonDown)  
                { //如果滑鼠在移動過程中并且按下，也就是說滑鼠的拖動事件。  
                    var x:Number=event.stageX - oldX; //相對Application的坐标的移動量  
                    var y:Number=event.stageY - oldY;  
                    oldX=event.stageX; //更新拖動開始是的坐标  
                    oldY=event.stageY;  
                    img.move(img.x + x, img.y + y); //img是 Image的id,如果擴充到其他元件，改這裡就可以了。  
                }  
            }  
        ]]>  
    </mx:Script>  
    <mx:Label x="10"  
              y="10"  
              text=""  
              id="lbl"/>  
    <mx:Label x="10"  
              y="27"  
              text=""  
              id="lbl2"/>  
    <mx:Panel x="257"  
              y="71"  
              width="700"  
              height="80%"  
              layout="absolute"  
              horizontalScrollPolicy="off"  
              verticalScrollPolicy="off"  
              title="圖檔在面闆中的拖動例子"  
              fontSize="12">  
        <mx:Image id="img"  
                  x="0"  
                  y="0"  
                  source="test.JPG"  
                  mouseMove="dragEnd(event)"  
                  mouseDown="dragStart(event)"/>  
    </mx:Panel>  
    <!--文檔注釋-->  
    <mx:TextInput width="500"  
                  height="146"  
                  fontWeight="normal"  
                  textAlign="center">  
        <mx:htmlText>  
            <![CDATA[  
             Date: 2009.05.05  
             Email:[email protected]  
             QQ:1019822077  
             Blog:<font color="#FF0000">  
             <ahref="http://hi.baidu.com/woaidelphi/blog/category/Flex" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >  
                http://hi.baidu.com/woaidelphi/blog/category/Flex  
             </a></font>  
             華夏之星希望和你成為朋友。一起學習，共同奮鬥!!!。。。  
        ]]>  
        </mx:htmlText>  
    </mx:TextInput>  
</mx:Application>

5.從外部拖動到元件，比如從桌面上拖動一個圖檔到圖檔元件等。

因為我的flash包中沒有flash.events.NativeDragEvent等。是以這裡先不總結了。

6.引入dNdLib.swc庫讓拖動變得更簡單

Flex開放了它的拖拽庫（即：flex-drag-n-drop-lib），我們可以利用它做一些很有用的拖拽應用，下面我們

來做一個簡單的示例，按照下述的步驟，你會了解到在Flex中使用flex-drag-n-drop-lib的技巧。

1.點選這裡下載下傳SWC元件到你的桌面。

http://code.google.com/p/flex-drag-n-drop-lib/downloads/list

2.打開FlexBuilder，建立一個Flex Project，在第三步的Library Path選項中，點選Add SWC按鈕，将剛才下

載到的SWC元件引入到項目中。

3.點選Finish，在自動建立的MXML檔案中，敲入以下代碼：

Xml代碼

<?xml version="1.0" encoding="utf-8"?>  
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  
                layout="absolute"  
                xmlns:containers="dNdLib.containers.*"  
                fontSize="12">  
    <mx:Script>  
        <![CDATA[  
            import dNdLib.managers.DnDManager;  
        ]]>  
    </mx:Script>  
    <containers:DnDContainer borderStyle="solid"  
                             id="left"  
                             backgroundColor="#FFFFFF"  
                             width="161"  
                             height="237"  
                             x="110"  
                             y="168">  
        <mx:Button label="拖動我"  
                   mouseDown="DnDManager.getInstance().doDrag(event)"  
                   width="92"  
                   height="32"/>  
        <mx:CheckBox label="拖動就這麼簡單"  
                     mouseDown="DnDManager.getInstance().doDrag(event)"/>  
    </containers:DnDContainer>  
  
    <containers:DnDContainer borderStyle="solid"  
                             id="bottom"  
                             backgroundColor="#FFFFFF"  
                             x="415"  
                             y="168"  
                             width="140"  
                             height="237"/>  
</mx:Application>

然後Run一下看看結果吧，元件可以拖動了。很簡單吧。

注意：必須為DnDContainer設定一個背景色（backgroundColor=color），否則可能無法産生相應區域。

轉載自：http://www.cnblogs.com/liuzhong/archive/2011/08/12/2136521.html

flex拖動技術彙總

繼續閱讀

壓縮編碼M-JPEG、MPEG4、H.264

ASP程式設計中20個非常有用的例子

ASP程式設計中15個非常有用的例子

invalid byte 1 of 1-byte UTF-8 sequence

出現invalid byte 1 of 1-byte UTF-8 sequence問題

可變參數宏， Variadic Macros

C++的背影——C++之父Bjarne Stroustrup印象

C++ 的背影{C++之父Bjarne Stroustrup印象　左輕侯}

處理PCX檔案

不用iconv函數實作UTF-8編碼轉換GB2312的PHP函數

SIP Presence (二)RFC 3265 - Session Initiation Protocol (SIP)-Specific Event Notification

C#多線程——前台線程和背景線程

PHP進階學習之session寫入資料庫

CSMA/CD1． CSMA/CD的概述2． CSMA 的工作原理3． CSMA/CD控制規程及特點4． CSMA/CD協定5． CSMA/CD的優點6．結束語

Small tricks

無元件上傳圖檔到資料庫中，最完整解決方案