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

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

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

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

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

如下是一个实例:

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

 

package 
 {
	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:local="*">
	<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>
	<local:ZwnTree id="tree" labelField="@name" width="300"
				 height="100%" dragEnabled="true" dropEnabled="true"
				 dragMoveEnabled="true" dragDrop="dropDrag(event);" dataProvider="{xmlColl}"/>
</mx:Application>


 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值