介绍
鼠标拖拽画框线是我们常用的操作。可以通过Axure来完美的模拟鼠标拖拽画框线的效果，当接触到了其他控件的时候，可以通过交互来表示接触状态。
(相关资料图)
今天，就让我们来学习如何制作它。
预览效果
制作思路
1.下面就让我们来制作它。先整理下思路。由于网页的交互不支持拖拽的交互事件，所以，我们要添加一个空白的矩形来当作拖拽的画布。在它基础上添加交互事件。
2.拖拽的框线可以通过一个大小和位置不断变化的矩形来模拟。
3.拖拽时，我们需要记录鼠标在拖拽开始时的X和Y值，然后通过它来计算拖拽的距离。我们可以通过两个矩形的文本值来分别的记录它。
4.拖拽时，我们还需要记录是向哪个方向拖拽的，因为不同方向，框线的大小和位置的计算方式。是不同的。我们可以将其看做有四个象限的坐标轴。以鼠标结束点判断是在哪个象限。
制作内容
然后让我们来制作它。
首先，拖入一个空白矩形作为画布，然后将其锁定，以免误操作。
然后拖入一个矩形作为拖拽时框线，改变其样式，命名为框线。将其隐藏。
然后拖入六个矩形，用于记录值，分别命名为X，Y，1象限，2象限，3象限，4象限。
给四个象限设置一个选项组和选中样式，因为每次只能有1个象限被选中。
然后再拖入一个矩形，命名为可选中的矩形，给它设置错误样式，我们用错误样式来表示框线接触它时的交互
制作交互
元件制作完成后，我们来设置交互。
画布鼠标按下时交互
画布鼠标按下时，我们需要这样设置
1.首先显示框线，并将其置顶，然后将框线尺寸设置到最小（1,1），移动框线到鼠标所在的位置[[Cursor.x，Cursor.y]]，然后设置文本，记录鼠标的初始位置[[Cursor.x，Cursor.y]]到X，和Y中。
画布鼠标经过时交互
然后设置鼠标经过时，也就是拖拽时的交互。
我们需要确定鼠标拖拽时，是在哪个象限。这就需要计算鼠标拖拽时位置和鼠标最初按下时的位置，由X坐标和Y坐标的差值是正还是负，来确定是在那个象限。
如上图所示，临时变量代表保存的X和Y值，如果[[Cursor.x]]值和X保存的值的差值小于0，且[[Cursor.y]]值和Y保存的值的差值小于0，则是第一象限。选中1象限的元件。以此类推。其他的条件和操作也这样设置。
然后，我们需要设置象限选中时的交互。我们需要将框线的大小重置为（1，1），位置重置为X，Y保存的值，这是为了在象限改变时，框线不会发生位置和尺寸的错误。
回到画布的交互，我们需要继续设置鼠标经过时的交互。
如果象限1选中时，设置框线的尺寸宽度为[[Math.abs(Cursor.x-LVAR1.text)]]，也就是鼠标x值和X保存的文本差值的绝对值，设置框线的尺寸高度为[[Math.abs(Cursor.y-LVAR1.text)]]，也就是鼠标y值和Y保存的文本差值的绝对值。同时将锚点设为右下角。
如果象限2选中时，复制1象限的交互。同时将锚点设为左下角。
如果象限3选中时，复制1象限的交互。同时将锚点设为左上角。
如果象限4选中时，复制1象限的交互。同时将锚点设为右上角。
鼠标松开时交互
然后我们设置鼠标松开时的交互。这里需要设定可选中矩形的错误状态
鼠标松开时，将可选中的矩形的错误状态设置为false，然后隐藏框线。
然后我们还需要设置框线的交互。
当鼠标松开时，需要设置隐藏当前元件，这是因为拖拽时，如果鼠标接触了本元件，则需要隐藏它自身。
尺寸改变时，需要添加条件，如果框线区域经过了可选中的矩形，则设置可选中的矩形的错误状态为true
如果框线区域未经过可选中的矩形，则设置可选中的矩形的错误状态为false。
最后，将鼠标经过事件复制到可选中的矩形和框线上，以设置在拖动时，框线触及它们时的交互。
预览原型
设置完成后，将所有记录坐标和象限选中状态的矩形隐藏。
预览原型，可以自由拖拽框线，并且框线接触到了可选中的矩形时，显示蓝色的边框，如果未接触到可选中的矩形时，隐藏蓝色的边框。
