拖動--從startDrag開始直到flex里的DragManager 或者是NativeDragManager 但核心還是三個事件mouseDown，mouseUp，mouseMove

這幾個事件的用法如下：

首先初始化的時候給被拖動的物體假設實例名是 thumb 添加事件監聽

?????thumb.addEventListener( MouseEvent.MOUSE_DOWN, onMouseDown );
???? thumb.addEventListener( MouseEvent.MOUSE_UP,onMouseUp );

其次是事件處理函數

?

??private function onMouseDown( e : MouseEvent ) : void
??{
???stage.addEventListener( MouseEvent.MOUSE_MOVE, onMoveHandler );
???stage.addEventListener( MouseEvent.MOUSE_UP, onMouseUp );
??}
??
??private function onMouseUp( e : MouseEvent ) : void
??{
???if( stage.hasEventListener( MouseEvent.MOUSE_MOVE ) )
???{
????stage.removeEventListener( MouseEvent.MOUSE_MOVE, onMoveHandler );
???}
???if( stage.hasEventListener( MouseEvent.MOUSE_UP ) )
???{
????stage.removeEventListener( MouseEvent.MOUSE_UP, onMouseUp );
???}
??}

? private function onMoveHandler( e : MouseEvent ) : void
? {
? ?thumb.x = mouseX;
? ?thumb.y = mouseY;
? }

為何給stage 添加MOUSE_MOVE 事件，用了明了

?

關于組件的拖動
flex里邊有很多組件支持拖動，如Tree，DataGrid，TileList，Tile等，只要設置相應的屬性便可進行拖動管理
這里針對Tree組件舉個簡單的例子，其它組件類似。
代碼如下：

代碼:

<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"
??
?dragDrop="findSource( event )"? />
?
<mx:Tree
?dropEnabled="true"
?dataProvider="{copyData.item}"?
?labelField="@label"/>
上面代碼中只需設置
dropEnabled="true" //是否可以將被拖動的物體放置進來
dragEnabled="true" //是否可以拖動子元素
dragMoveEnabled="true" //是否只是移動元素，而不是復制元素
allowMultipleSelection="true" //是否可以多項拖動元素

這些屬性，該組件便可拖移了，拖移之后相應的數據源 dataProvider 也發生了變化，如順序等。而且數據相同
的兩個組件間也可以進行相互拖動。
除了這些還需注意的時如何接受被拖動進來的物體。上面代碼中有個事件 dragDrop="findSource( event )"
函數如下:

代碼:

private function findSource( e : DragEvent ) : void
{
?var source : Object = e.dragSource.dataForFormat("treeItems");
}
其中source指向的是被拖動的元素，而e.dragSource屬DragSource類型的對象。至于"treeItems"字符串，各個組
件代表的不同，如DataGrid的是"item"。

2,拖動單個控件

拖動單個物體需要DragEvent，DragSource，DragManager代碼如下

代碼:

<mx:Canvas y="40" id="cansAccess" backgroundColor="#000000"? width="300" height="200"
?dragDrop="complete(event)" dragEnter="enter(event)"/>
<mx:Button id="btnDrag" label="拖動我"?
?mouseDown="doDrag( event )" />

private function doDrag( e : MouseEvent ) : void
{
?var ds : DragSource = new DragSource;
?ds.addData( {"x" : e.localX, "y" : e.localY},"xy");
?DragManager.doDrag(btnDrag,ds,e); // 開始拖動這個物體? btnDrag
}
private function enter( e? :DragEvent ) : void
{
?DragManager.acceptDragDrop( Canvas(e.target) );?
?????????????? // cansAccess 接受被拖進來的物體
}
private function complete( e : DragEvent ) : void
{
?var xy : Object =? e.dragSource.dataForFormat("xy");
??// 獲取數據對象 也就是在doDrag函數中寫的DragSource對象
?btnDrag.x = this.mouseX - xy.x;
?btnDrag.y = this.mouseY - xy.y;
}

3,拖動外部文件
拖動外部文件需要NativeDragEvent，NativeDragManager類。其實用法和上面的DragManager一樣，但是往往一個
控件既要接受Flex內部被拖進來的控件，還要接受外部拖進來的文件，這時候顯得就比較麻煩了。
但是請不要害怕，這里的Clipboard會幫我解決問題。 請看下面的代碼：

代碼:

<mx:Canvas y="40" id="cansAccess" backgroundColor="#000000"? width="300" height="200"
?dragDrop="complete(event)" nativeDragDrop="nativeComplete(event)" dragEnter="enter(event)"
/>
<mx:Button id="btnDrag" label="拖動我"?
?mouseDown="doDrag( event )" />
按理來說 當拖動內部控件的時候會觸發dragDrop事件，拖動外部文件會觸發nativeDragDrop事件，事實上，不管
你拖動外部文件還是內部控件都會觸發這兩個事件。這里我們使用Clipboard來解決這一麻煩，代碼如下。

代碼:

private function doDrag( e : MouseEvent ) : void
{
?var ds : DragSource = new DragSource;
?ds.addData( {"x" : e.localX, "y" : e.localY},"xy");
?DragManager.doDrag(btnDrag,ds,e);
}
private function enter( e? :DragEvent ) : void
{
?DragManager.acceptDragDrop( Canvas(e.target) );
?NativeDragManager.acceptDragDrop(Canvas(e.target));
?//使其接受從外部拖進來的文件???
}
private function complete( e : DragEvent ) : void
{??
?/* ? */
}
private function nativeComplete( e : NativeDragEvent ) : void
{
?var filesObj : Array = e.clipboard.getData(ClipboardFormats.FILE_LIST_FORMAT ) as Array;
?//獲取剪切板上的文件列表
?if( filesObj &&? filesObj.length > 0)? //符合這一條件說明是從外部拖文件進來? 這里假設處理拖
進來的是圖片
?{
??for each( var item : File in filesObj )
??{
???switch( item.extension )
???{
????case "jpg":
????case "bmp":
????case "gif":
????var img : Image = new Image;?????
img.source = item.nativePath;?????cansAccess.addChild( img );
????break;?????
???}
??}
?}
?else?? //否則的話是就是在拖動內部的控件
?{
??var xy : Object =? e.clipboard.getData(e.clipboard.formats[0]);??
??//還記得doDrag 的時候附加的那個?DragSource 么？
??//這里因為不能用e.dragSource.dataForFormat("xy")了因為事件不一樣，
??//但我們還是可以用剪切板來取得這個值
??btnDrag.x =? e.localX - xy.x + cansAccess.x;
??btnDrag.y =? e.localY - xy.y + cansAccess.y;
?}
}

轉載于:https://www.cnblogs.com/Mirage/archive/2008/08/27/1277473.html

總結

以上是生活随笔為你收集整理的flex学习笔记--关于拖动的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。