视频教程

一、案例效果

效果1

《送宝宝回家》

效果2

二、应用场景

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

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

三、组件用法

基本用法

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

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

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

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

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

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

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

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