7.拖放目标/DragDrop

老赵发表于:2015年01月03日 20:41:03更新于:2019年03月27日 14:26:15


视频教程


一、案例效果

效果1

0015c9afb68a87399ca5472cd45ff9e

《送宝宝回家》


效果2

00157623a0ab6b0507f3c0984f1bd7a


二、应用场景

拖放目标是一个容器组件,可以置入允许拖动的图片,并触发相应的事件。

使用这个组件,会给交互带来趣味性,也可以结合一些逻辑判断。

blob.png


三、组件用法

基本用法

1.高级组件中找到并添加“拖放目标”组件,调整为合适的大小

0015c9b123d909796f4aeae0027b157


2.调整拖放目标组件的位置、大小。

blob.png


3.添加一张图片,设置为可拖动的图片,在右侧面板勾选“可拖动”

blob.png


4.勾选好可拖动,下方可以设置拖拽的属性,决定拖拽途中元素的动作;还可以对元素的拖拽方向做出限制,这里我们就不另外设置了,使用默认即可。

blob.png


5.选中拖放目标,添加图片为正确置入元素。还可以勾选“仅限正确元素置入”,增加趣味性。

0015c9b141d4011490c11f144a44f13


5.给火箭添加一个飞出动画,目的是当火箭放在拖放目标里时,可以有一个飞出去的效果。注意:动画设置为等待触发,目的是让火箭动画不要早早的自己播放了。

0015c9b158db629bb5e653002f0d977



6.再次选中拖放目标,添加正确置入时的响应操作,即火箭拖动到目标区域时,播放飞出动画。

0015c9b16258b7646c75f941560f9aa



7.注意事项:拖放目标组件和可拖动图片的初始位置不能相同。


--------- 不了解设计的程序员不是好客服 ---------------

回复(6)