企业🤖AI智能体构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
# 拖放容器的使用 * * * * * 拖放组件允许用户指定一个拖放容易用来接收拖放元素实现特性的交互效果(例如教育类测试题)。下面用实例来说明如何使用拖放组件。 示例地址: http://prerelease.mugeda.com/client/preview_css3.html?id=d927803f 编辑地址: http://prerelease.mugeda.com/animation/edit/d927803f 1、首先在工具栏选择拖放组件。 ![](https://box.kancloud.cn/b9c5d5fc95f69b829b9ecfad3fe43889_650x228.png) 2、在舞台上绘制拖放组件。拖放组件在舞台上可见,但是在渲染时不可见。如果需要,可以在拖放组件下面叠加图片、形状等可见元素。 ![](https://box.kancloud.cn/922b312c9f21fd111526e916bd877fdf_650x605.png) 3、绘制好后,可以对其进行属性配置。 ![](https://box.kancloud.cn/e0ecca8370e009c7dfa635b1bae9b334_650x520.png) 各个属性说明如下: 1) 放置提示:当元素拖放进入拖放容器时用一个半透明的填充颜色做提示; 2) 提示颜色:放置提示的填充颜色; 3) 允许多次拖放:是否允许同时在容器中放置多个元素;如果不允许,当新的元素放置后,之前的元素会自动复位到初始位置; 4) 自动对准:当拖放元素靠近容器时,将拖放元素自动放置到容器中央; 5) 自动复位:如果释放拖放元素时元素不在容器范围内,是否将元素复位到初始位置; 6) 允许物体:在这里添加允许放置到容器中的命名物体。这些物体需要配置允许拖放的属性。 ![](https://box.kancloud.cn/0279a51417fd83a538fdc2493ba9da70_650x466.png) 拖放组件设置完成后,在渲染的时候,可以用鼠标(PC)或者手指(手机)拖动某一个元素。当元素位于容器的范围内放下物体,物体即可在指定容器中被记录下来。如果想要在放置元素到容器或者拖动元素离开容器后改变元素的属性(例如改变文字显示或者改变元件实例播放位置),可以为组件添加触发条件为“拖动物体放下”和“拖动物体离开”的行为。 ![](https://box.kancloud.cn/cf1436cae5d6b1cdf0e911b8ddfa72c6_650x565.png) 为了获取拖放组件的结果,可以通过下面的宏来获取(假如拖放组件的名称是"拖放") : {{拖放}}: 放置在拖放组件中的第一个命名元素的名称 。 {{拖放.0}}, {{拖放.1}}, {{拖放.2}}: 放置在拖放组件中的的第0,1,2个命名元素的名称 。 如果没有放置下来的元素,上面的表达式返回空字符串("")。 ![](https://box.kancloud.cn/7f10a82aa0ff793f6ebcc01c53d811c2_650x528.png) 观看本节视频教程: http://cdn1.mugeda.com/course/3/3.5/3.5.10.mp4