`
onaod32n
  • 浏览: 6642 次
社区版块
存档分类
最新评论

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,也是可以控制的。
     
     
     
     
     
     
     
     
     
  height="400"/>   
     
     
  -->   
     
     
     
     
     
     
     
                                                                            height="400"/>                           -->                                                                       
     
     
     
     
  height="250">   
     
     
  height="70"/>   
     
     
     
  height="700" x="150" y="10" backgroundColor="#ffffff"    
  dragEnter="onDragEnter(event)" dragDrop="doDragDrop(event)">   
     
                    height="250">                                       height="70"/>                                height="700" x="150" y="10" backgroundColor="#ffffff"         dragEnter="onDragEnter(event)" dragDrop="doDragDrop(event)">               Text
  要实现的最后一个目标就是:将canvas里的image拖拽到text,在text里显示图片的路径。
  要点:这是一个两个非增强型组件之间的相互拖拽,所以要写的代码多了些。用到的方法都已经在在上一篇上写到了。
     
     
     
     
     
  height="250">   
     
     
  height="70" />   
     
     
     
  height="700" x="150" y="10" backgroundColor="#ffffff"    
  dragEnter="onDragEnter(event)" dragDrop="doDragDrop(event)">   
  height="400" id="img"/>-->   
     
  height="100" text="path" fontSize="18"  
  dragEnter="dragEnterHandler(event)" dragOver="dragOverHandler(event)" dragDrop="dragDropHandler(event)"/>   
    
                    height="250">                                       height="70" />                                height="700" x="150" y="10" backgroundColor="#ffffff"         dragEnter="onDragEnter(event)" dragDrop="doDragDrop(event)">         height="400" id="img"/>-->          height="100" text="path" fontSize="18"         dragEnter="dragEnterHandler(event)" dragOver="dragOverHandler(event)" dragDrop="dragDropHandler(event)"/>    
  这个与第三个例子相比较,除了多了imga到text的拖拽外,还增加了canvas接收多个图片的效果。
  拖放,就是这个样子了。
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics