- 浏览: 9706 次
- 性别:
- 来自: 南京
最新评论
这里写四个实例: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接收多个图片的效果。
拖放,就是这个样子了。
发表评论
-
COM(组件对象模型)
2012-07-03 13:42 782COM :创建和使用组件 的标准 (DLL:COM的一 ... -
在Flex组件上显示手型的鼠标
2012-07-02 10:24 595在Flex组件上显示手 ... -
关于Flex 的渲染器的总结
2012-07-02 10:24 490关键字: Flex. 渲染 ... -
flex笔记--安装与项目建立
2012-07-02 10:24 317使用java做后台,采用Eclipse插件式安装 操 ... -
flex与mysql交互
2012-07-01 09:43 617这个小例子通过remoteobject的通讯方法。实现fl ... -
flex相关配置文件的说明
2012-07-01 09:43 493flex是通过amf协议来进行了通信的,是Flash Re ... -
Flex 与java 通信,通过BlazeDS
2012-07-01 09:43 6021. Server代码 package com.east ... -
Flex存取数据库Image类型数据-Java后台
2012-07-01 09:43 629如果将图片数据储存在数据库内,如何把它显示出来,本例涉及技 ... -
Flex 数据易犯错误: 常见误用和错误
2012-07-01 09:43 543在某些情形下,绑定操作似乎不能正常工作,此时你可能非常懊恼 ... -
ORA-12520错误解决方法
2012-06-30 17:58 775ORA-12520错误解决方法 今天用hibern ... -
没有找到MSVCR90D.DLL的简单解决方法
2012-06-30 17:58 821转载:http://www.cnblogs.com/_xb ... -
win7无法进入“计算机-右键-管理”的解决方法
2012-06-30 17:58 680我用的笔记本是联想y450 系统自带的是win7家庭 ... -
oracle修改SGA后无法启动的临时解决方法
2012-06-30 17:58 1057做oracle的优化,使用Console中打开数据库的配置 ... -
FireFox中使用ExtJs日期控件错误的解决方法
2012-06-30 17:58 672在extjs中有一个字段是日期格式,我想直接使用extjs ...
相关推荐
npm install --save-dev @4tw/cypress-drag-drop 或纱线 yarn add --dev @4tw/cypress-drag-drop 在加载 Cypress 之前(通常在您的commands.js )放置以下行: require ( '@4tw/cypress-drag-drop' ) 或者,...
Angular-ng-drag-drop.zip,角度拖放-基于HTML5,无外部依赖关系。角度拖放,Angularjs于2016年发布,是Angularjs的重写版。它专注于良好的移动开发、模块化和改进的依赖注入。angular的设计目的是全面解决开发人员的...
前端项目-angular-drag-and-drop-lists,Angular directives for sorting nested lists using the HTML5 Drag and Drop API
注意:v-drag-drop的2.x及更高版本仅与Vue 3兼容。 如果使用Vue 2,请安装1.x版。 旨在封装本机拖放API的某些特性,并使其更易于与Vue.js一起使用。 还添加了一些方便的功能,例如名称空间。 目录 安装 安装v-drag-...
module-drag-drop-sort-delete.html
一个功能非常强大的动态树,可以实现结点的拖拉,可以单击右键!!!!!!!
一个功能非常强大的动态树,可以实现结点的拖拉,还可以点击右键
qt实现拖放文件到界面上,获取内容等 Qt 文件的拖放 drag - drop。该文章的demo的源码 https://blog.csdn.net/linbounconstraint/article/details/107518650
drag-drop-plus够物车PHP
dtree, dhtmlxtree(1.5普通版及1.3专业版), drag-drop-tree
angular-drag-drop, 在没有任何外部依赖关系的angular.js 中,声明性拖放 Angular drag-and-drop Angular.js 中的声明性拖放和零依赖版权所有( C ) 2015,Geoff Goodman ( https://github.com/ggoodman )安装多种...
Expand branches during drag-drop(4KB)
Class for drag-drop enabled TreeView(2KB)
安装npm install angular-drag-and-drop-lib 用法为了访问库指令和组件,您必须从项目中导入AngularDragAndDropLibModule 。 import { AngularDragAndDropLibModule } from 'angular-drag-and-drop-lib';...@...
Window下拖放操作Drag & Drop 全解析
当时只有少数几个库,而且它们没有我想要...安装npm install ng - drag - drop -- save用法导入默认样式将style.css导入到index.html中。 它具有一组默认样式,这些样式将应用于拖动操作。 这是完全可选的,您可以根据
PyTrader-python-mt4-mt5-交易api-connector-drag-n-drop-master
ExtJS4官方指南翻译:DragandDrop拖放/Grid组件/Tree组件/容器与布局
ph-drag-drop-rank 这是一系列不同调查要素中的一个要素。 它是作为我的计算机科学硕士论文的一部分构建的。 如果您有任何建议、错误或一些麻烦(如果源代码不遵循 Web 组件或聚合物中的某些最佳实践),请与我联系...
React本机拖动排序拖放排序控件可用于本机版本迭代安装yarn add react-native-drag-sortornpm i react-native-drag-sort --saveexport { DragSortableView, AutoDragSortableView }性能(GIF)...DragSortableView 如果...