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.
  
  
  
  
  
  
  
  
  
  这个应该很简单吧,任何继承了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接收多个图片的效果。
  拖放,就是这个样子了。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值