Block Group: | Logic |
Icon: |
![]() |
Allows the user to resize an object by dragging that object or one of its children.
These properties can take input and give output.
dragStart specifies the mouse event that starts moving the object. Typically, this is the onMouseDown event for the child. In that case, find the event in the child’s Advanced properties and bind it to this property.
dragEnd specifies the event that stops moving the object. Typically, this is onMouseUpGlobal.
percents determines whether the minWidth, minHeight, maxWidth, and maxHeight properties are pixel values or percent values.
minWidth specifies the smallest width that the element can be resized to, as a pixel value or a percentage of its parent’s width.
minHeight specifies the smallest height that the element can be resized to, as a pixel value or a percentage of its parent’s height.
maxWidth specifies the largest width that the element can be resized to, as a pixel value or a percentage of its parent’s width.
maxHeight specifies the largest height that the element can be resized to, as a pixel value or a percentage of its parent’s height.
dragMode specifies restrictions on the direction of resizing.
These properties can give output. They cannot take input.
Use onMouseUpGlobal, not onMouseUp, to ensure that the resize works correctly, even if the parent’s size is restricted and the cursor leaves the parent bounds.
For the Cursor property, choose the Resize cursor.
In this example, when the user drags the shape, the group resizes. The maximum height of the group is 100 pixels. Even if the cursor is outside the shape when the button is released, the drag finishes successfully.
Typically, a small child image in the lower right-hand corner of a group is used to resize the entire group. To create this effect:
Make sure the Drag Size block belongs to the group, not the child. If it belongs to the child, delete the block and start again.