拖動(dòng)--從startDrag開(kāi)始直到flex里的DragManager 或者是NativeDragManager 但核心還是三個(gè)事件mouseDown，mouseUp，mouseMove

這幾個(gè)事件的用法如下：

首先初始化的時(shí)候給被拖動(dòng)的物體假設(shè)實(shí)例名是 thumb 添加事件監(jiān)聽(tīng)

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

其次是事件處理函數(shù)

?

??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 事件，用了明了

?

關(guān)于組件的拖動(dòng)
flex里邊有很多組件支持拖動(dòng)，如Tree，DataGrid，TileList，Tile等，只要設(shè)置相應(yīng)的屬性便可進(jìn)行拖動(dòng)管理
這里針對(duì)Tree組件舉個(gè)簡(jiǎn)單的例子，其它組件類(lèi)似。
代碼如下：

代碼:

<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"/>
上面代碼中只需設(shè)置
dropEnabled="true" //是否可以將被拖動(dòng)的物體放置進(jìn)來(lái)
dragEnabled="true" //是否可以拖動(dòng)子元素
dragMoveEnabled="true" //是否只是移動(dòng)元素，而不是復(fù)制元素
allowMultipleSelection="true" //是否可以多項(xiàng)拖動(dòng)元素

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

代碼:

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

2,拖動(dòng)單個(gè)控件

拖動(dòng)單個(gè)物體需要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="拖動(dòng)我"?
?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); // 開(kāi)始拖動(dòng)這個(gè)物體? btnDrag
}
private function enter( e? :DragEvent ) : void
{
?DragManager.acceptDragDrop( Canvas(e.target) );?
?????????????? // cansAccess 接受被拖進(jìn)來(lái)的物體
}
private function complete( e : DragEvent ) : void
{
?var xy : Object =? e.dragSource.dataForFormat("xy");
??// 獲取數(shù)據(jù)對(duì)象 也就是在doDrag函數(shù)中寫(xiě)的DragSource對(duì)象
?btnDrag.x = this.mouseX - xy.x;
?btnDrag.y = this.mouseY - xy.y;
}

3,拖動(dòng)外部文件
拖動(dòng)外部文件需要NativeDragEvent，NativeDragManager類(lèi)。其實(shí)用法和上面的DragManager一樣，但是往往一個(gè)
控件既要接受Flex內(nèi)部被拖進(jìn)來(lái)的控件，還要接受外部拖進(jìn)來(lái)的文件，這時(shí)候顯得就比較麻煩了。
但是請(qǐng)不要害怕，這里的Clipboard會(huì)幫我解決問(wèn)題。 請(qǐng)看下面的代碼：

代碼:

<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="拖動(dòng)我"?
?mouseDown="doDrag( event )" />
按理來(lái)說(shuō) 當(dāng)拖動(dòng)內(nèi)部控件的時(shí)候會(huì)觸發(fā)dragDrop事件，拖動(dòng)外部文件會(huì)觸發(fā)nativeDragDrop事件，事實(shí)上，不管
你拖動(dòng)外部文件還是內(nèi)部控件都會(huì)觸發(fā)這兩個(gè)事件。這里我們使用Clipboard來(lái)解決這一麻煩，代碼如下。

代碼:

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));
?//使其接受從外部拖進(jìn)來(lái)的文件???
}
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)? //符合這一條件說(shuō)明是從外部拖文件進(jìn)來(lái)? 這里假設(shè)處理拖
進(jìn)來(lái)的是圖片
?{
??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?? //否則的話(huà)是就是在拖動(dòng)內(nèi)部的控件
?{
??var xy : Object =? e.clipboard.getData(e.clipboard.formats[0]);??
??//還記得doDrag 的時(shí)候附加的那個(gè)?DragSource 么？
??//這里因?yàn)椴荒苡胑.dragSource.dataForFormat("xy")了因?yàn)槭录灰粯?#xff0c;
??//但我們還是可以用剪切板來(lái)取得這個(gè)值
??btnDrag.x =? e.localX - xy.x + cansAccess.x;
??btnDrag.y =? e.localY - xy.y + cansAccess.y;
?}
}

轉(zhuǎn)載于:https://www.cnblogs.com/Mirage/archive/2008/08/27/1277473.html

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。