The allowFrom option lets you specify a target CSS selector or Element which must be the target of the pointer down event in order for the action to start. This option available for drag, resize and gesture, as well as pointerEvents (down, move, hold, etc.). Using the allowFrom option, you may specify handles for each action separately and for all your pointerEvents listeners.

If resize edges are used, resize events will have rect and deltaRect properties. In resizestart, rect will be identical to the rect returned by interactable.getRect(element) and deltaRect will have all-zero properties. rect is updated on each resizemove and the values in deltaRect reflect the changes.

If you’d like an element to behave as a resize corner, let it match the selectors of two adjacent edges.

Resize handle elements must be children of the resizable element. If you need the handles to be outside the target element, then you will need to use Interaction#start.

Enable the action for the Interactable. If the options object has no enabled property or the property value is true then the action is enabled. If enabled is false, the action is disabled.

The action will start after the pointer is held down for the given number of milliseconds.

The compliment to allowFrom, ignoreFrom lets you specify elements within your target with which to avoid starting actions. This is useful when certain elements need to maintain default behavior when interacted with. For example, dragging around a text/contentEditable, by wrapping this object with a draggable element and ignoring the editable content you maintain the ability to highlight text without moving the element.

Choose what should happen if the target would be resized to dimensions less than 0x0. The possible values are: 'none' will limit the resize rect to a minimum of 0x0 'negate' will allow the rect to have negative width/height 'reposition' will keep the width/height positive by swapping the top and bottom edges and/or swapping the left and right edges

If this is changed to true then drag, resize and gesture actions will have to be started with a call to Interaction#start as the usual down,move, <action>start… sequence will not start an action.

max is used to limit the number of concurrent interactions that can target an interactable. By default, any number of interactions can target an interactable.

By default only 1 interaction can target the same interactable+element combination. If you want to allow multiple interactions on the same target element, set the maxPerElement property of your object to a value >= 2.

Called when an interaction is finished.

Called when the object is being interacted with.

Called when an interaction is started.

interact.js comes with an aspectRatio modifier which can be used to force the resized rect to maintain a certain aspect ratio. The modifier has 3 options: - ratio - number or ‘preserve’ - The aspect ratio to maintain or the value ‘preserve’ to maintain the starting ratio - equalDelta - boolean - Increase edges by the same amount instead of maintaining the same ratio - modifiers - array of modifiers - Modifiers to apply to the resize which will be made to respect the aspect ratio options To guarantee that the aspect ratio options are respected by other modifiers, those modifiers must be in the aspectRatio.modifiers array option, not in the same resize.modifiers array as the aspectRatio one.

Change snapping settings for drag and resize. See docs/snapping.