What is interact. Js?

Interact. Js is a JavaScript repository that provides drag, drop, resize, and multi-touch gestures for modern browsers. Its free and open source versions offer powerful configurations like inertia and pointer and constraint adjuster.

Interact. Js Pro extends this open source functionality with more regulators, more complex built-in interactions, framework integration, and advanced development tools to save you events and labor.

The repository focuses on continuously rendering pointer input events across different browsers and devices, providing a convenient way to pretend the user’s mouse pointer is moving when it is not (adsorption, inertia, etc.).

Interact takes an element or CSS selector string and returns an object that Interactable has a number of methods for configuring action and event listeners. Pointer interaction queue press -> Move -> bounce, launch drag, resize, or gesture. By adding an event listener method, you can provide feedback for InteractEvent events, including pointer coordinates, speed, element size, and so on.

Note that interact. Js does not move elements for you by default. Decorate a Styling element with your own event listeners and have it move as you drag. That way, you can control whatever happens.

Getting Started

After installation, the basic steps for setting up your objects and interactions are as follows:

  1. To create aInteractableObject.
  2. Open action options, then add editor, Inertia, etc.
  3. Add event listeners for visual feedback and updating your application’s status.

For example, here is some simple code for simple sliding input events:

/ / step 1
const slider = interact('.slider')    // Target element with "slider" class (class)

slider
  / / step 2
  .draggable({                        // Make the element trigger the drag event
    origin: 'self'.// (0, 0) will be the upper-left of the element
    inertia: true.// Enable inertial movement if the element is thrown out
    modifiers: [
      interact.modifiers.restrict({
        restriction: 'self'           // Keep the drag coordinates inside the element})]})/ / step 3
  .on('dragmove'.function (event) {  // This listener is called each time a drag event is triggered
    const sliderWidth = interact.getElementRect(event.target.parentNode).width
    const value = event.pageX / sliderWidth

    event.target.style.paddingLeft = (value * 100) + The '%'
    event.target.setAttribute('data-value', value.toFixed(2))})Copy the code

action

Interact. Js supports three types of actions triggered by Pointers: press → move → unblock queue:

  • Drag and drop is used to move elements or draw elements on the canvas. This can be combined with DropZone for drag-and-drop applications.
  • Resize is used to observe the size and position of an element when the pointer is used to move the edges of one or both elements
  • Gestures are used for two-finger gestures including Angle, proportion, etc., data.

The Pro version provides sorting and swapping in draggable actions for dragging and dropping elements that rearrange a list.