7.拖放目标/DragDrop

老赵发表于:2015年01月03日 20:41:03更新于:2019年01月07日 15:59:37

视频教程

  • 组件简介

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

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

blob.png

  • 效果展示

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

00157623a0ab6b0507f3c0984f1bd7a



  • 组件添加

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

blob.png


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

blob.png

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

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

blob.png


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

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

blob.png

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

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

blob.png

  • 案例研究(可复制):

blob.png

复制网址


  • 注意事项

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

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

回复(6)