本课程学习使用OnDragStart,OnDrag和OnDragDrop事件创建多变化的拖放交互效果。

拖放界面

步骤1：将图片转换为动态面板

首先，打开DragAndDropImages.rp文档的Drag and Drop Images页面
线框图窗口中选择第一张图片缩略图。由于我们希望图片可以被拖放，所以右键图片，快捷菜单选择“转换->转换为动态面板”，将图片放置到动态面板中。
添加新建动态面板的标签为：Batch1

步骤2：添加OnDrag用例动作“拖动时移动面板”

要拖动图片，需要在OnDrag事件添加用例，并选择“移动面板”动作，勾选配置Batch1面板。默认情况下，移动动作设置为“拖动时移动Batch1面板”。点击确定，关闭用例编辑器。

步骤3：添加OnDragStart（开始拖动动态面板时）用例

拖放交互中的每个阶段，我们都会设置发生动作。当用户拖动图片时，我们希望将图片状态隐藏到文字信息“Drop an image here to remove it from the batch”状态后面。
要在拖动开始时设置面板切换，添加Batch1的OnDragStart（开始拖动动态面板时）事件用例，选择“设置面板状态为指定状态”动作，勾选配置Image Strip面板，选择状态到Remove State状态。点击确定关闭用例编辑器。OnDragStart（开始拖动动态面板时）用例设置如图所示。

步骤4：添加OnDragDrop（结束拖动动态面板时）事件用例1的用例条件

当用户在页面上拖动图片时，图片放置在不同的位置时，会产生不同的交互行为。
在第一个用例条件中，要检查图片是否放置到图片上的区域，所以添加OnDragDrop（结束拖动动态面板时）事件用例，点击“添加条件”，设置条件表达式为：部件范围Batch1覆盖部件范围Image Strip
点击确定，关闭条件生成器。

步骤5：隐藏图片

当图片拖放到Image Strip区域中时，我们要隐藏图片，在用例编辑器中，选择“隐藏面板”，勾选配置Batch1面板被隐藏。添加淡入淡出动画（保持动画用时为默认的500毫秒）。
 
步骤6：设置Image Strip面板到默认状态

我们要把Image Strip面板设置到默认状态，保持用例编辑器打开，选择“设置面板状态为指定状态”，勾选配置Image Strip面板，选择状态：Default State。
生成原型测试效果，当拖放第一个图片缩略图在Image Strip上时，图片淡出隐藏，Image Strip面板返回到Default State状态。

步骤7：添加OnDragDrop（结束拖动动态面板时）事件用例2的用例条件

现在考虑其它条件，即当图片拖放在Image Strip面板区域以外的其它地方。
Batch1面板上，添加OnDragDrop结束拖动动态面板时）事件的第二个用例，设置动作为“移动Batch1到拖动前X.Y”。

步骤8：设置Image Strip面板切换到default state状态

除了将图片移动到它原来的位置，我们也要将Image Strip面板切换到default state状态，在用例中添加第2个动作“设置Image Strip面板到default state状态”
因为这个用例是考虑除了用例1以外的其它情况，所以用例条件自动生成为“Else If True”。
生成原型测试效果，当拖放图片在Image Strip面板区域以外的地方时，图片会返回它原来的位置，Image Strip面板切换到default state状态。