flex3:drag-drop全攻略(二)
这里写四个实例:1,List->List 2,List->TileList 3,List->Canvas 4,Image->Text
通过这四个例子,我们实现一个从列表里拖拽图片,然后显示的例子。
准备:
先准备6张图片,三张是缩略图,三张是对应的大图。
开始
1,从list到list
要实现的目标就是:listA显示缩略图的路径,拖到listB之后显示大图的路径。
要点就是设置两个list的dropEnabled和dragEnabled属性为true.
layout="absolute">
layout="absolute">
这个应该很简单吧,任何继承了ListBase的组件都有dragEnabled和dropEnabled属性。
2,从list到TileList
实现的目标:从左侧的list里面的图片列表里选择一张图片拖拽到右侧的TileList。
要点:用到了itemRenderer的知识,前面我也写过这个。其余的应该与上面的一样,list和tileList都是直接能拖动的组件,把list的一项拖动到tileList的本质就是把list的数据的一项保存到tileList的dataProvider里面。原来的list的那项是被复制到TileList里还是剪切到TileList,也是可以控制的。
layout="absolute">
-->
layout="absolute"> -->
layout="absolute">
layout="absolute"> Text
要实现的最后一个目标就是:将canvas里的image拖拽到text,在text里显示图片的路径。
要点:这是一个两个非增强型组件之间的相互拖拽,所以要写的代码多了些。用到的方法都已经在在上一篇上写到了。
layout="absolute">
-->
layout="absolute"> -->
这个与第三个例子相比较,除了多了imga到text的拖拽外,还增加了canvas接收多个图片的效果。
拖放,就是这个样子了。
猜你喜欢
转载自rhd01rhd.iteye.com/blog/1574511
今日推荐
周排行