flex3:drag-drop全攻略(二)

最新推荐文章于 2013-10-31 11:40:53 发布

原创最新推荐文章于 2013-10-31 11:40:53 发布 · 129 阅读

0 ·

CC 4.0 BY-SA版权

技术杂绘专栏收录该内容

15 篇文章

订阅专栏

本文介绍如何使用拖放技术实现不同组件间的图片拖拽操作，包括从列表到列表、列表到瓷砖列表、画布到文本等场景，并详细解释了每个步骤的技术要点。

　　这里写四个实例：1,List->List 2,List->TileList 3,List->Canvas 4,Image->Text
　　通过这四个例子，我们实现一个从列表里拖拽图片，然后显示的例子。
　　准备：
　　先准备6张图片，三张是缩略图，三张是对应的大图。
　　开始
　　1，从list到list
　　要实现的目标就是:listA显示缩略图的路径，拖到listB之后显示大图的路径。
　　要点就是设置两个list的dropEnabled和dragEnabled属性为true.
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　这个应该很简单吧，任何继承了ListBase的组件都有dragEnabled和dropEnabled属性。
　　2,从list到TileList
　　实现的目标：从左侧的list里面的图片列表里选择一张图片拖拽到右侧的TileList。
　　要点：用到了itemRenderer的知识，前面我也写过这个。其余的应该与上面的一样，list和tileList都是直接能拖动的组件，把list的一项拖动到tileList的本质就是把list的数据的一项保存到tileList的dataProvider里面。原来的list的那项是被复制到TileList里还是剪切到TileList，也是可以控制的。
　　
　　
　　
　　
　　
　　
　　
　　
　　
　　width="300" height="400"/>
　　
　　
　　-->
　　
　　
　　
　　
　　
　　
　　
　　 width="300" height="400"/> -->
　　
　　
　　
　　
　　width="55" height="250">
　　
　　
　　width="50" height="70"/>
　　
　　
　　
　　width="900" height="700" x="150" y="10" backgroundColor="#ffffff"
　　dragEnter="onDragEnter(event)" dragDrop="doDragDrop(event)">
　　
　　 width="55" height="250"> width="50" height="70"/> width="900" height="700" x="150" y="10" backgroundColor="#ffffff" dragEnter="onDragEnter(event)" dragDrop="doDragDrop(event)"> Text
　　要实现的最后一个目标就是：将canvas里的image拖拽到text,在text里显示图片的路径。
　　要点：这是一个两个非增强型组件之间的相互拖拽，所以要写的代码多了些。用到的方法都已经在在上一篇上写到了。
　　
　　
　　
　　
　　
　　width="55" height="250">
　　
　　
　　width="50" height="70" />
　　
　　
　　
　　width="900" height="700" x="150" y="10" backgroundColor="#ffffff"
　　dragEnter="onDragEnter(event)" dragDrop="doDragDrop(event)">
　　width="300" height="400" id="img"/>-->
　　
　　width="100" height="100" text="path" fontSize="18"
　　dragEnter="dragEnterHandler(event)" dragOver="dragOverHandler(event)" dragDrop="dragDropHandler(event)"/>
　　
　　 width="55" height="250"> width="50" height="70" /> width="900" height="700" x="150" y="10" backgroundColor="#ffffff" dragEnter="onDragEnter(event)" dragDrop="doDragDrop(event)"> width="300" height="400" id="img"/>--> width="100" height="100" text="path" fontSize="18" dragEnter="dragEnterHandler(event)" dragOver="dragOverHandler(event)" dragDrop="dragDropHandler(event)"/>
　　这个与第三个例子相比较，除了多了imga到text的拖拽外，还增加了canvas接收多个图片的效果。
　　拖放，就是这个样子了。