flex(twaver) 树(tree)的元素拖动的定制显示及控制问题

定制Flex Tree控件拖动反馈

最新推荐文章于 2022-04-20 15:05:10 发布

原创最新推荐文章于 2022-04-20 15:05:10 发布 · 278 阅读

0 ·

CC 4.0 BY-SA版权

flex 专栏收录该内容

22 篇文章

订阅专栏

本文介绍如何在Flex中定制Tree控件的拖动反馈显示方式，包括移除默认的黑色横线显示，以及如何通过自定义类来改变拖动指示器的样式，并附带了DRAG_OVER事件监听的处理方法。

1 拖动时不显示那条黑色横线。

样式中设定

  tw|Tree{
            dropIndicatorSkin: ClassReference("mx.skins.ProgrammaticSkin");
        }

2 定制拖动时的提示显示方式

定制样式

  tw|Tree{
            dropIndicatorSkin: ClassReference("定制的类");
        }

定制的类

public class AAA extends ProgrammaticSkin
	{
		public function  AAA()
		{
			super();
		}

/**
		 *  @private
		 */
		override protected function updateDisplayList(w:Number, h:Number):void
		{	
			super.updateDisplayList(w, h);
			
			if (!parent) {
				return;
			}
			var listBase:ListBase = parent.parent as ListBase;
			if (!listBase) {
				return;
			}
			var g:Graphics = graphics;
			g.clear();
			g.lineStyle(2, 0x004400);
			g.drawRect(-5, -1, w, listBase.rowHeight);
			//g.drawRect(-5, -1, w, h);
			g.endFill();
			
//			var g:Graphics = graphics;
//			
//			g.clear();
//			g.beginFill(0xa1bde2, 0.5);
//			g.drawRect(-5, -1, w, 23);
		}
	}
}

DRAG_OVER监听处理

tree.addEventListener(DragEvent.DRAG_OVER,function(evt:DragEvent):void{
	if(evt.dragSource.hasFormat(OpViewConsts.DRAG_DRAGSOURC_FORMAT_TREEITEMS)){
	if(接受拖动){
		evt.preventDefault();
		DragManager.acceptDragDrop(tree);	
		tree.showDropFeedback(evt); 
	}else{
		evt.preventDefault();
		tree.hideDropFeedback(evt);//没有这一行的话，在不接受DROP事件的节点处，定制显示的那个框将无法隐藏而停留在别的可接受DROP事件的节点处。
	}
	}
});

3 定制节点是否可接收其它节点的代码(twaver里面有自己的实现，单纯扩展TreeItemRenderer还没法处理)

http://riashanghai.com/zh-hant/node/57