Dorado 9 : 集合控件间的拖拽(sample-center)

页面效果如下:

在该页面上我们可以将三个区域中的对象相互拖拽。

由于dorado所有的控件支持一系列与拖拽操作相关的属性、事件和方法。则我们来看这个范例中告诉我们的相关知识点:

  • draggable与dropable:它们是控件元素可被拖拽的基本属性,通过这两个属性的设定我们可以决定一个控件元素是否具有被拖拽或接收拖拽过来的控件元素的可能性,注意这只是可能性,它实际上是会触发拖拽相关的一系列逻辑(这些逻辑将会在拖拽2例子中进一步说明)。而在逻辑中我们可以动态决定是否允许被拖拽或接收被拖拽过来的控件元素。

首先一个控件如果我们希望它可以被拖拽离开本位置,我们就需要设置这个控件的draggable为true,设置为true后,控件的拖拽效果如:

  • dragTags和dropableTags是对应的属性,它们只有在对应的draggable与dropable属性为true的情况下才有意义。在拖拽环境中为避免控件被随意的拖拽和接收,从而导致browser操作员的误解,我们有必要对拖拽做一些行为上的控制。dragTags和dropableTags是提供给我们做这种行为控制的辅助属性,当一个控件元素被拖拽到另一个dropable为true的控件时,系统会判断

    ({dragTags} ∩ {dropableTags}) != φ
    

    如果成立,则接收这个被拖拽过来的元素,否则就不接收.
    范例1:

    ({1,2,3,4} ∩ {4,5,6,7}) = {4}
    

    范例2:

    ({emp,dept} ∩ {task,job}) = φ
    

    计算结果是否空集会决定拖拽方式,在元素拖拽的过程中我们也可以通过页面显示特效得以区分:
    下图是运算结果不为φ的效果

    下图是运算结果为φ的效果

    本文为了说明效果,修改了本例中第二个BlockView中的dropableTags为"block1",与Sample Center中的效果并不完全一样,请您自行调整测试效果.

在本范例中这两个BlockView以及ListBox的draggable与dropable属性都设置为true,它最终的效果是可以相互拖拽。请自行体验。

Attachments:

DragDrop1.png (image/png)
Dragable.png (image/png)
DragTags1.png (image/png)
DragTags2.png (image/png)