flex中 Tree树节点内部拖动实例（此实例限制了什么节点可以拖动及拖动到什么位置）

Flex 中要想控制Tree组件内，节点的拖动位置，需要进行如下操作。

 

1. 要想真正限制树节点拖动位置，使用简单的拖动事件是不行的，需要重写Tree树组件类。

2. 然后重写Tree树组件的：dragDropHandler 方法。

3. 在使用时，使用重写的树组件。

 

如下是一个实例：

 第一步：重写Tree树组件类：

 

package zwn {
	import mx.collections.ICollectionView;
	import mx.collections.IViewCursor;
	import mx.controls.Tree;
	import mx.core.mx_internal;
	import mx.events.DragEvent;
	import mx.managers.DragManager;
	use namespace mx_internal; //命名空间

	public class ZwnTree extends Tree {
		//_dropData 直接从继承的 Tree类中拿来用的
		public function ZwnTree() {
			super();
		}
		/**
		 *  @private
		 *  Returns the stack of parents from a child item.
		 */
		private function getParentStack(item:Object):Array {
			var stack:Array = [];
			if (item == null)
				return stack;

			var parent:* = getParentItem(item);
			while (parent) {
				stack.push(parent);
				parent = getParentItem(parent);
			}
			return stack;
		}
		override protected function dragDropHandler(event:DragEvent):void {
			// if we're moving to ourselves, we need to treat it specially and check for "parent" 
			// problems where we could recurse forever.
			if (event.dragSource.hasFormat("treeItems")) {
				var items:Array = event.dragSource.dataForFormat("treeItems") as Array;
				var i:int;
				var n:int;

				if (event.action == DragManager.MOVE && dragMoveEnabled) {
					if (event.dragInitiator == this) {
						// If we're dropping onto ourselves or a child of a descendant then dont actually drop
						calculateDropIndex(event);

						// If we did start this drag op then we need to remove first
						var index:int;
						var parent:*;
						var parentItem:*;

						var dropIndex:int = _dropData.index;

						// 获得 拖动目标 项的父节点  。 get ancestors of the drop target item
						var dropParentStack:Array = getParentStack(_dropData.parent);
						dropParentStack.unshift(_dropData.parent); //将父节点添加到数组的开头
						n = items.length;
						for (i = 0;i < n;i++) {
							parent = getParentItem(items[i]); //获得父节点
							index = getChildIndexInParent(parent,items[i]); //获得父节点的索引号
							//check ancestors of the dropTarget if the item matches, we're invalid
							//确定  拖动目标 的父节点
//
							var item:* = items[i];
							var itemName:String = item.localName().toString(); //
							var targetParent:*;

							for each (parentItem in dropParentStack) {
								//we dont want to drop into one of our own sets of children
								// 不能把节点放到自身的子节点下面
								if (items[i] === parentItem)
									return;
								//zwn 上
								if (parentItem) {
									var targetParentName:String = parentItem.localName().toString();
									if (itemName == "section" && targetParentName == "chapter") {
										targetParent = parentItem;
										break;
									}
									if (itemName == "chapter" && targetParentName == "content") {
										targetParent = parentItem;
										break;
									}
								}
									//zwn 下

							}
							//we remove before we add due to the behavior 
							//of structures with parent pointers like e4x
							if (targetParent) { //zwn
								removeChildItem(parent,items[i],index);
								//is the removed item before the drop location?
								// then we need to shift the dropIndex accordingly
								if (parent == _dropData.parent && index < _dropData.index)
									dropIndex--;

								addChildItem(targetParent,items[i],dropIndex);
							}
						}

						return;
					}
				}

				// If not dropping onto ourselves, then add the 
				// items here if it's a copy operation.
				// If it's a move operation (and not on ourselves), then they 
				// are added in dragCompleteHandler and are removed from 
				// the source's dragCompleteHandler.  We do both in dragCompleteHandler
				// because in order to be re-parented, they must be removed from their
				// original source FIRST.  This means our code isn't coupled fantastically 
				// as dragCompleteHandler must get the destination tree and 
				// cast it to a Tree.
				/*
				   if (event.action == DragManager.COPY) {
				   if (!dataProvider) {
				   // Create an empty collection to drop items into.
				   dataProvider = [];
				   validateNow();
				   }

				   n = items.length;
				   for (i = 0;i < n;i++) {
				   var item:Object = copyItemWithUID(items[i]);

				   addChildItem(_dropData.parent,item,_dropData.index);
				   }
				   }
				 */
				lastDragEvent = null;
			}
		}
		/**
		 *  @private
		 *  Finds the index distance between a parent and child
		 */
		private function getChildIndexInParent(parent:Object,child:Object):int {
			var index:int = 0;
			if (!parent) {
				var cursor:IViewCursor = ICollectionView(iterator.view).createCursor();
				while (!cursor.afterLast) {
					if (child === cursor.current)
						break;
					index++;
					cursor.moveNext();
				}
			} else {
				if (parent != null && _dataDescriptor.isBranch(parent,iterator.view) && _dataDescriptor.hasChildren(parent,
					iterator.view)) {
					var children:ICollectionView = getChildren(parent,iterator.view);
					if (children.contains(child)) {
						cursor = children.createCursor();
						while (!cursor.afterLast) {
							if (child === cursor.current)
								break;
							cursor.moveNext();
							index++;
						}

					} else {
						//throw new Error("Parent item does not contain specified child: " + itemToUID(child));
					}
				}
			}
			return index;
		}
	}
}

 第二步：使用 ZwnTree 类

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" fontSize="15"
				xmlns:zwn="zwn.*">
	<mx:Script>
		<![CDATA[
			import mx.events.DragEvent;
			import mx.managers.DragManager;
			import mx.core.DragSource;
			import mx.events.DragEvent;
			private function dropDrag(event:DragEvent):void {
				tree.hideDropFeedback(event); //取消默认画线
			}
		]]>
	</mx:Script>
	<mx:XMLListCollection id="xmlColl" source="{xmlList}"/>
	<mx:XMLList id="xmlList" xmlns="">
		<lecture name="潭浩强" sex="男" age="55"
				 position="教授" isBranch="true"/>
		<content name="全局信息" isBranch="true">
			<chapter id="01" name="普通Flash" isBranch="true">
				<section id="0101" name="Flash1" type="SWF"/>
				<section id="0102" name="Flash2" type="SWF"/>
			</chapter>
			<chapter id="01" name="相册" isBranch="true">
				<section id="0104" name="相册1" type="Album"/>
				<section id="0104" name="相册2" type="Album"/>
			</chapter>
			<chapter id="02" name="视频" isBranch="true">
				<section id="0201" name="我相信MV" type="FLV"/>
				<section id="0202" name="跳伞" type="FLV"/>
			</chapter>
			<chapter id="03" name="wulei's ex" isBranch="true">
				<section id="0301" name="测验1" type="QTI"/>
				<section id="0302" name="测验2" type="QTI"/>
			</chapter>
			<chapter id="04" name="音画同步" isBranch="true">
				<section id="0401" name="音画同步01" type="VSync"/>
				<section id="0402" name="音画同步04" type="VSync"/>
			</chapter>
		</content>
	</mx:XMLList>
	<zwn:ZwnTree id="tree" labelField="@name" width="300"
				height="100%" dragEnabled="true" dropEnabled="true"
				dragMoveEnabled="true" dragDrop="dropDrag(event);" dataProvider="{xmlColl}"/>
</mx:Application>

 

 

说明：源码见附件。

评论

11 楼 zhangdaren 2012-06-01  

多谢多谢了，帮了大忙了。。我改成了我需要的要求了。。

10 楼 javaEEdevelop 2011-03-10  

DragTree.rar

9 楼 zwnJava 2010-12-27  

lixp_cn 写道

源码不能解压哦

报歉，重新上传了一个，应该可以了。

8 楼 lixp_cn 2010-12-16  

源码不能解压哦

7 楼 zwnJava 2010-12-15  

fuzhzh 写道

能否把源码发给我？谢谢，邮箱:[e-mail]

源码请到附件中下载，“说明：源码见附件”。

请在此文章的底部，查打：DragTree.rar

6 楼 fuzhzh 2010-12-09  

能否把源码发给我？谢谢，邮箱:[e-mail]

5 楼 cuiuse 2010-12-01  

你好，感谢你热情的把代码发到我的邮箱，希望能够和你讨论，写的那颗树源码（图片、数据源）都在的博客里面，只要稍加修改就可以运行。那颗树还有几个问题没有解决，正在寻找解决办法。

4 楼 zwnJava 2010-11-26  

cuiuse 写道

能否把源码发给我？谢谢，邮箱:[e-mail]

刚看到，已发送。

3 楼 cuiuse 2010-11-04  

能否把源码发给我？谢谢，邮箱:[e-mail]

2 楼 zwnJava 2010-09-26  

[e-mail]

stuhack0303 写道

能否把源码发给我？谢谢，邮箱:[e-mail]

已发

1 楼 stuhack0303 2010-09-16  

能否把源码发给我？谢谢，邮箱:[e-mail]