Action Options

Methods draggable(), resizable(), and gesturable() in the Interactable were used to turn on and set functionality to the target element. They have some common configuration options and some feature-specific options and event properties.

Drag, resize, and action interactions trigger an InteractEvent event that has the following common properties applicable to all function types:

Common Action Options

The draggable, Resizable, and Gesturable properties of the Interactable accept true or false to turn that function on or off, or an object with configuration properties to change some Settings.

max

Max is used to limit the number of concurrent interaction events that can point to an interaction object. By default, any number of interaction events can target the same interaction object.

maxPerElement

By default, only one interaction event can target a combination of the same interaction object + element. If you want to allow multiple interactive events on the same target element, set the maxPerElement property of the object to >= 2.

manualStart

If this option is changed to true, drag, resize, and gesture functions must be activated by calling the interactive event # start, usually down, move,

start… Sequences do not turn on a function. Check out more at Auto Start.

hold

After the pointer is pressed, delay the configuration for milliseconds before starting the interaction function.

inertia

Modify drag to adjust the size of inertia Settings. See documentation/Inertia.

styleCursor

If auto start is enabled, the interaction decorates the draggable, resizing element pointer while your pointer is hovering over the element

interact(target).styleCursor(false)
Copy the code

Disable pointer decoration for all functions and set the styleCursor option to false.

cursorChecker

interact(target)
  .resizable({
    edges: { left: true.right: true },
    cursorChecker (action, interactable, element, interacting) {
      // interact. Js by default uses a two-way arrow <->,
      // But we need specific arrows (< -or ->) in each direction
      if (action.edges.left) { return 'w-resize'}
      if (action.edges.right) { return 'e-resize'}
    }
  })
  .draggable({
    cursorChecker () {
      // Drag events do not set arbitrary Pointers
      return null}})Copy the code

You can use interact(Target).stylecursor (false) to disable the default pointer, but this disables pointer decoration for all functions. To disable or modify Pointers for each function, you can set a cursorChecker method that accepts information about the current interaction event and returns the value of the CSS pointer for the current element.

autoScroll

interact(element)
  .draggable({
    autoScroll: true,
  })
  .resizable({
    autoScroll: {
      container: document.body,
      margin: 50.distance: 5.interval: 10.speed: 300,}})Copy the code

Scroll a container (window or an HTMLElement) while dragging or resizing to move around the edges of the container.

allowFrom (把手（handle）)

<div class="movable-box">
  <div class="drag-handle" />
  Content
  <div class="resize-handle" />
</div>
Copy the code

interact('.movable-box')
  .draggable({
    allowFrom: '.drag-handle',
  })
  .resizable({
    allowFrom: '.resize-handle',
  })
  .pointerEvents({
    allowFrom: The '*',})Copy the code

AllowFrom lets you target a CSS selector or an element whose pointer pressing event must be targeted for functionality to turn on. This option works with dragging, resizing, gestures and pointerEvents (down, move, hold, etc.). . Using the allowFrom option, you can set up separate handles and listeners for each function.

The allowFrom element must be a child of the interacTable.

ignoreFrom

<div id="movable-box">
  <p class="content">Selectable text</p>
  <div no-pointer-event>Does not trigger click, keep pressing, etc</div>
</div>
Copy the code

var movable = document.querySelector('#movable-box')

interact(movable)
  .draggable({
    ignoreFrom: '.content'.onmove: function (event) {
      / *... * /
    }
  })
  .pointerEvents({
    ignoreFrom: '[no-pointer-event]',
  })
  .on('tap'.function (event) {})Copy the code

IgnoreFrom lets you select elements in your target to avoid starting arbitrary functionality. This feature can be used when certain elements need to keep the default behavior when interacting. For example: Dragging around a text or editable object, including and ignoring editable elements with a draggable element, allows you to retain the behavior of highlighting text without dragging the element.

enabled

Enable the Interactable function. This function is enabled if there is no enabled in the configuration object or if the property value is true. If enabled is set to false, this feature is disabled.