视频教程

• 组件简介

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

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

• 效果展示

图片靠近时会自动吸附在拖放目标的位置，这个案例中火箭是可以拖动的元素，拖放到地球上时触发飞出的动画

• 组件添加

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

第二步：选中需要拖动的图片，在右侧面板将图片设置为“可拖动”

下方可以设置拖拽的属性，决定拖拽途中元素的动作；还可以对元素的拖拽方向做出限制

这里我们就不另外设置了，使用默认

第三步：选中拖放目标，添加图片为正确置入元素

还可以反选“仅限正确元素置入”，增加趣味性

第四步：再次选中拖放目标，添加正确置入时的响应操作

这里我们添加一个动画（需要先给图片设置一个等待触发的动画才可以添加）

• 案例研究（可复制）：

复制网址

• 注意事项

拖放目标组件和可拖动图片的初始位置不能相同。