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>