Skip to end of metadata
Go to start of metadata

拖拽的基本使用

本文主要介绍集合控件之间的拖拽。所谓集合控件是指DataListBox, Grid, Tree, BlockView这种集合类型的控件。

以下图我们简要说明拖拽的基本使用--我们希望左边的Block中的元素可以拖拽到右上侧的Block中:

首先要针对不同操作的控件设置dragable和droppable属性

则首先要设置如下的属性:

左边的Block要设置dragable为true,表示左边的控件支持drag(出坞)

右边的block的droppable为true,表示右边的控件支持drop(入坞)

其次要设置dragTags和droppableTags

当页面上有多个控件之间允许拖拽的时候,如下图:

我们希望左侧上方的Block控件不允许拖拽到右下方。对于右下方的ListBox控件来说,如果仅仅根据被拖拽对象的dragable和自身的dropable属性是无法区分被拖拽过来的是左上方的BlockView还是左下方的BlockView,为更好的实现这种需求,我们对入坞和出坞设计了tags属性:dragTags和droppableTags:

拖拽时系统自动判断被拖拽对象的dragTags与入坞的目标对象的droppableTags属性是否匹配,如果匹配就允许入坞。

这就如同海港与海船之间的关系:

海港声明了本海港只允许军舰入港,当一首船过来后声明我是军舰,则允许入坞,当一艘渔船过来则不允许入坞。

另为提高港口的使用效率,我们可以使港口可以同时容纳不同类型的船,同时也允许船具有多中功能。如:港口允许停放军舰和海监船。

与此相应的技术实现是:

droppable就可以设置为多个标记"WarShip,OceanSurveillanceShip",用逗号隔开。

同理dragTags也允许多个标记的写法。

最终只要有一个匹配上就允许入坞,基本算法:

 

拖拽相关的方法说明

onDragStart

当被拖拽对象被拖离自身位置时触发该事件,一般情况下我们并不需要特别为此事件定义代码,Dorado控件会自动初始化拖拽的draggingInfo信息,默认情况下draggingInfo中的object和sourceControl属性就是控件自身。

对于Collection集合类型的对象,object就是子元素,如:Tree拖拽时object就是Node, Grid拖拽时object属性就是行对应的数据实体对象,BlockView对象object属性就是Block。

当然你可以在该事件定制draggingInfo中的object属性:

onDragStop

该事件慎用,onDragStop表示拖拽停止,但是要注意取消拖拽也会触发该事件,因此正常情况下拖拽结束后你的业务逻辑代码应该写在onDraggingSourceDrop中

onDraggingSourceDrop

这是释放被拖拽的控件对象时触发的事件,通常在该事件中完成释放后的业务逻辑代码的编写。该事件与onDragStart事件对于,我们可以从arg.draggingInfo中获取被拖拽的控件对象的基本信息:

1.获取被拖拽的控件对象

2.对于BlockView,Tree,Grid集合类型的控件,你还可以获取内部被拖拽的子元素:

一个参考范例(拖拽后修改被拖拽节点数据实体的parentId的实例)

拖拽对数据持久化的影响

STATE_MODIFY和STATE_MOVED重合之处

 

控件拖拽

控件内部对象拖拽

Labels
  • No labels