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">
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">
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">
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">
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">
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