在Flex/AIR中使用Drag And Drop. Using Drag And Drop in Flex/AIR

September 29, 2008 by Guoliang, 2,603 views

[小站博客均为原创, 转载请保留以下信息:

作者:http://liguoliang.com 欢迎访问:Adobe上海用户组: http://riashanghai.com ]

关于Drag和Drop的基础知识与基本应用可以参见:http://livedocs.adobe.com/flex/3/html/help.html?content=dragdrop_1.html

1. 设计目标

实现Flex/AIR中的Tree,DataGrid自身或相互之间的拖动.

本例仍旧使用NoteManagement,关于NoteManagement的相关信息请参见:
1.完整Flex程序+详细解释之便条管理系统(Tree/回溯/XML/Event) Annotated Flex Sample Application: Note Management
2.使用Air与SQLite开发NoteManagement
3.Flex树形菜单动态加载 Flex Tree Dynamic Loading
通过以上三篇文章,您将对NoteManagement有一个概括性的了解.

2.概要设计:

image

2.1 Tree内目录拖动的实现:
如果使用Tree自带的Drag与Drop属性设定Tree,则目录之间只能实现十分局限的拖 动,如果目录不含有子目录,则其他目录无法拖动到该目录下.要解决这个问题,就必须使用自定义的itemRenderer,该itemRenderer继 承自TreeItemRenderer从而不影响Tree的其他功能的正常使用,相对来说,自定义的itemRenderer应该具有以下功能:1.在有 目录drag到itemRenderer上时他能够acceptDragDrop. 2:可以接受并处理dragDrop事件.

2.2 Note移动的实现:
使用DataGrid的属性dragEnabled属性设定DataGrid可以被drag. 当drag到目录中时,dragEnter的target acceptDragDrop,通过对相关事件的监听进行相应处理.

3.详细实现:

3.1 Tree内目录拖动:
设置Tree的属性为:dragEnabled=”true”  dropEnabled=”false”
在Tree初始化完成后监听DRAG_COMPLETE事件;DragtreeCategory.addEventListener(DragEvent.DRAG_COMPLETE, onCatDragComplete);
通过使用onCatDragComplete可以阻止其默认行为preventDefault(),这样我们获得对DRAG_DROP的控制.
为 Tree建立一个自定义的itemRenderer,该itemRenderer监听DragEvent.DRAG_ENTER与 DragEvent.DRAG_DROP,通过对DRAG_ENTER的监听,控制itemRenderer是否接受Drag,通过对DRAG_DROP 的监听,将DRAG的目录加入到DROP目录中,并删除原目录,以完成整个过程.
3.2 Note的移动
设置DataGrid的属性为dragEnabled=”true”
同3.1在DataGrid初始化完成后监听DRAG_Complete,阻止默认行为并获得控制
当Drag的Note Enter到Tree中时,通过itemRenderer的监听, 控制itemRenderer是否接受DragDROP,并控制后续过程.
自定义itemRenderer的代码如下:

  1. package component
  2. {
  3. import com.insprise.common.sql.Connection;
  4. import com.insprise.common.utility.LogUtils;
  5. import com.insprise.common.utility.SQLUtils;
  6. import com.insprise.nmair.Category;
  7. import com.insprise.nmair.Note;
  9. import flash.data.SQLConnection;
  10. import flash.events.SQLEvent;
  12. import mx.controls.treeClasses.TreeItemRenderer;
  13. import mx.events.DragEvent;
  14. import mx.managers.DragManager;
  16. public class TreeCatItemRender extends TreeItemRenderer
  17. {
  18. public static var dragAndDropClass:int; //辨别Drag来自于Tree还是DataGrid.
  20. private var conn:SQLConnection = new SQLConnection();
  21. private var catMoved:Category;
  22. private var catMoveInto:Category;
  23. private var catEnter:Category;
  24. private var noteMoved:Note;
  25. private var noteMoveIntoCat:Category;
  26. private var noteEnter:Category;
  27. /**
  28. * 构造函数,每次使用该Renderer时会自动添加EventListener;
  29. */
  30. public function TreeCatItemRender() {
  31. super();
  32. this.addEventListener(DragEvent.DRAG_ENTER, dragEnterHandler);
  33. this.addEventListener(DragEvent.DRAG_DROP, dragDropHandler);
  34. }
  36. //在拖动到某一个Render上时,判断是否允许接受Drop;
  37. private function dragEnterHandler(e:DragEvent):void {
  38. if(e.dragSource.hasFormat(“treeItems”)) {
  39. dragAndDropClass = 0;
  40. catMoved = e.dragSource.dataForFormat(“treeItems”)[0] as Category;
  41. catEnter = this.data as Category;
  42. LogUtils.defaultLog.info(“Draged Item: ” + catMoved.label);
  43. LogUtils.defaultLog.info(“Enter Cat: ” + catEnter.label);
  44. if(catMoved.isAncestor(catEnter) || catMoved == catEnter || catMoved.parent == catEnter) {
  45. LogUtils.defaultLog.info(“上级目录不可移动到下级目录, 也不可移动到期自身内部”);
  46. return;
  47. }
  48. DragManager.acceptDragDrop(e.currentTarget as TreeCatItemRender);
  49. }
  51. else if(e.dragSource.hasFormat(“items”)) {
  52. dragAndDropClass = 1;
  53. noteMoved = e.dragSource.dataForFormat(“items”)[0] as Note;
  54. noteEnter = this.data as Category;
  55. if(noteMoved.parent == noteEnter) {
  56. LogUtils.defaultLog.info(“没有进行移动,不进行任何操作”);
  57. return;
  58. }
  59. DragManager.acceptDragDrop(this);
  60. trace(“Note parent.id: ” + noteMoved.parent.id );
  61. trace(“ Note Enter Cat id: ” + noteEnter.id);
  62. }
  63. }
  65. //在Drop之后 ,建立与数据库的连接,准备更新数据库.
  66. private function dragDropHandler(e:DragEvent):void {
  67. if(dragAndDropClass == 0) {
  68. e.preventDefault();
  69. catMoveInto = this.data as Category;
  70. LogUtils.defaultLog.info(“移动进: ” + catMoveInto.label);
  71. }
  72. else if(dragAndDropClass == 1) {
  73. e.preventDefault();
  74. noteMoveIntoCat = this.data as Category;
  75. LogUtils.defaultLog.info(“Note: ” + noteMoved.title + “ 被拖进了: ” + noteMoveIntoCat.label);
  76. }
  78. if(conn.connected) {
  79. LogUtils.defaultLog.info(“DataBase have Connected. Call UpdateDB Directly”);
  80. updateDB();
  81. return;
  82. }
  83. LogUtils.defaultLog.info(“Connect Db…..”);
  84. conn.addEventListener(SQLEvent.OPEN, updateDB);
  85. conn.openAsync(Connection.dbFile);
  86. }
  87. //建立 与数据的 连接之后Update改纪录.
  88. private function updateDB(e:SQLEvent=null):void {
  89. if(dragAndDropClass == 0) {
  90. var updateCatSql:String = “UPDATE Cat SET parent_ID=’” + catMoveInto.id + “‘ WHERE cat_ID
  91. =” + catMoved.id;
  92. SQLUtils.createAndExecuteStatement(conn, updateCatSql, null, updateDBSucess)
  93. }
  94. else if(dragAndDropClass == 1) {
  95. var updateNotesql:String = “UPDATE Note SET parent_ID=’” + noteMoveIntoCat.id +
  96. “‘ WHERE note_ID=” + noteMoved.id;
  97. SQLUtils.createAndExecuteStatement(conn, updateNotesql, null, updateDBSucess)
  98. }
  99. }
  101. //Update成功后,移动目录或note
  102. private function updateDBSucess(e:SQLEvent):void {
  103. if(dragAndDropClass == 0) {
  104. LogUtils.defaultLog.info(catMoved.label + “ 的parent_ID已成功更新为: ” + catMoveInto.id);
  105. catMoveInto.addSubCat(catMoved);
  106. LogUtils.defaultLog.info(“目录: ” + catMoveInto.label + “ 成功添加子目录: ” + catMoved.label);
  107. }
  108. else if(dragAndDropClass == 1) {
  109. LogUtils.defaultLog.info(noteMoved.title + “的parent_ID已成功更新为:  ” + noteMoveIntoCat.id);
  110. noteMoveIntoCat.addNote(noteMoved);
  111. LogUtils.defaultLog.info(“目录: ” + noteMoveIntoCat.label + “ 成功添加Note: ” + noteMoved.title);
  112. }
  113. }
  115. }
  116. }

在move情况下,我们把目标加入到Drop target中,并从Drag initiator中删除,使用dragDrop事件的监听函数来加入目标到Drop target, 使用dragComplete事件的监听函数来删除drag initiator中的源数据.

在这个例子中,由于在 addCat()与addNote()中以含有删除功能,故我们阻止了dragComplete,使用dragDrop处理增加与删除.addCat() 与addNote通过判断源数据的parent是否等于Drop target的id来进行对应处理.

在移动后元数据的parent与Drop target中的Category是不同的,这种情况下先将其删除,修改其parent属性后再加入到Drop target的Category中.完成操作.

代码如下:

  1. /**
  2. * Adds the given child.
  3. * If the child has an existing parent, it will be removed from its parent first then added to this.
  4. */
  5. public function addSubCat(child:Category):void {
  6. if(this.subCats == null) {
  7. subCats = new ArrayCollection();
  8. }
  10. if(child.parent == null) { // initial
  11. child._parent = this;
  12. subCats.addItem(child);
  13. }else{ // not null
  14. if(child.parent == this) {
  15. throw new Error(“The parent has already been set to this: ” + toString() + “, child: ” + child);
  16. }else{ // change parent.
  17. child._parent.delCat(child);
  18. child._parent = this;
  19. subCats.addItem(child);
  20. }
  21. }
  22. }
  24. //删除子目录.须提供一个index,通过findCatIndex函数寻找.
  25. /**
  26. * Remove the given child category and set the removed category’s parent to null.
  27. * @throw Error if the child’s parent is not this.
  28. */
  29. public function delCat(child:Category):void {
  30. trace(“This.id: ” + this.id);
  31. trace(“child’s Parent ID: ” + child.parent.id);
  32. trace(child._parent.subCats.getItemIndex(child));
  33. if(child._parent != this) {
  34. throw new Error(“The parent of the child is not this: ” + toString() + “, child: ” + child);
  35. }
  37. subCats.removeItemAt(subCats.getItemIndex(child));
  38. child._parent = null;
  39. }
  41. /**
  42. * 增加Note
  43. * 如果category的notes为空,则新建notes
  44. * 如果note的parent为空,则将this赋给note的parent  [Note初始化时发生]
  45. * 如果note的parent为this,则为重复添加.报错处理      [重复添加Note,报错]
  46. * 如果note的parent不等于this,则说明是移动过来的note,需要在该note原先的parent下删除该note,并将该note添加到this的notes中.
  47. */
  48. public function addNote(note:Note):void {
  49. if(notes == null) {
  50. notes = new ArrayCollection();
  51. } else if(note.parent == null) {
  52. note.parent = this;
  53. notes.addItem(note);
  54. } else{
  55. if(note.parent == this) {
  56. throw new Error(note.title + “ 的parent已经被设定为” + this.label);
  57. } else{
  58. note.parent.delNote(note);
  59. note.parent = this;
  60. notes.addItem(note);
  61. }
  62. }
  63. }
  65. /**
  66. * 删除note
  67. * 如果note的parent不为this,则报错
  68. * 否则删除该note
  69. * 并将note parent为空.
  70. */
  71. public function delNote(note:Note):void {
  72. if(note.parent != this) {
  73. throw new Error(note.title + “ note的parent不是this ” + this.label);
  74. }
  75. notes.removeItemAt(notes.getItemIndex(note));
  76. note.parent = null;
  77. }
This entry was posted in Flex and tagged , , , . Bookmark the permalink.

2 Responses to 在Flex/AIR中使用Drag And Drop. Using Drag And Drop in Flex/AIR

  1. home loan says:
    January 31, 2009 at 02:16

    Lovely. Great site.

    Reply
  2. mietwagen says:
    March 15, 2009 at 23:01

    Sehr gute Seite. Ich habe es zu den Favoriten.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>