今天学习了一下Flex控件的拖拽功能,在这里和大家分享下,虽然简单,但对于初学者还是挺有帮助的。
所有 Flex 组件都支持拖放操作。Flex 为 List、Tree 和 DataGrid 控件的拖放操作提供了附加支持, 提供了附加支持的控件实现拖拽非常简单,这些都是Flex底层为我们封装好的,只要在事件源中添加dragEnable="true"属性,然后在目标控件中添加dropEnabled="true"属性就可以了,剩下的就是Flex底层的工作了。
如果逻辑复杂的时候,需要我们就要用到mx.core.DragSource类来封装拖拽式需要传递的数据,然后用mx.managers.DragManager类来进行拖放的操作。
具体步骤如下:
- 在事件源中添加mouseDown事件,并向处理函数中传递DragSource和DragManager要用到的数据。主要数据查看下一步便可知道
- 在mouseDown的处理函数中new 一个DragSource对象,调用addData方法把要传递的数据和数据格式添加到对象中,然后调用DragManager的doDrag方法,开始拖拽操作。具体参数参看Adobe的官方文档.
- 在目标控件中添加dragEnter事件,在处理函数中根据接收到的数据格式,判断是否要进行接收,如下:
//接受拖放数据 if(e.dragSource.hasFormat(format)) DragManager.acceptDragDrop(e.target as IUIComponent);
- 在目标控件中添加dragDrop事件,在处理函数中得到事件源传过来的数据,并进行自定义的逻辑操作.
参考文章:Flex 拖拽范例