Axure6.5-网页上的拖拽效果-2013.03.20

网页上的拖拽效果

1、要实现的效果：

    将一个网页上的实体用鼠标拖动。

    （1）鼠标左键按下去的时候，选中实体，并将其在最前面显示。

    （2）按鼠标左键移动，实体随着鼠标移动。

    （3）鼠标左键抬起的时候，实体停留在鼠标的位置。

2、整体交互截图：

3、具体实现步骤：

    步骤1：拖拽矩形Rectangle到绘图区，命名为“拖拽实体”，双击键入文字“拖拽效果”。

    步骤2：选中“拖拽实体”，右击：Convert to Dynamic Panel。

    步骤3：添加OnDragStart 动作。如下图：    

    步骤4：添加OnDrag 动作。如下图（注意标红的4个地方）：   

   

    步骤5：添加OnDragDrop 动作，同步骤4。如下图（注意标红的4个地方）：

    步骤6：按F5键运行。

 

4 备注：move有6种动作，如下图。

  

    to——将拖拽实体移动到某一特定位置（OnDrag、OnDragDrop）。

    by——每次拖动，拖拽实体以x值y值移动（OnDragDrop、OnDragDrop）。

    with drag——随鼠标的移动移动或停止（OnDrag、OnDragDrop）。

    with drag X——拖拽实体将停留在鼠标的X轴所在位置（OnDrag、OnDragDrop）。。

    with drag Y——拖拽实体将停留在鼠标的Y轴所在位置（OnDrag、OnDragDrop）。。

    to X,Y before drag——拖拽实体在鼠标左键松开后回到起始位置（OnDrag、OnDragDrop）。