flex学习笔记--关于拖动

拖动--从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;

}

}