Introducción a interact.js

interact.js es una biblioteca de JavaScript que proporciona capacidades de arrastre, redimensionamiento y gestos multitáctiles, incluyendo inercia y snapping, compatible con navegadores modernos y versiones antiguas como IE9+. Facilita la creación de interacciones dinámicas en aplicaciones web.

Instalación con npm

Para proyectos que utilizan npm, se puede instalar la versión pre-empaquetada completa:

npm install --save interactjs

Luego, importar en el código:

// Importación ES6
import interact from 'interactjs'

// O con CommonJS
const interact = require('interactjs')

Para optimizar el tamaño, instalar solo módulos necesarios:

npm install --save @interactjs/interact @interactjs/auto-start @interactjs/actions @interactjs/modifiers @interactjs/dev-tools

Importar selectivamente:

import '@interactjs/auto-start'
import '@interactjs/actions/drag'
import '@interactjs/actions/resize'
import '@interactjs/modifiers'
import '@interactjs/dev-tools'
import interact from '@interactjs/interact'

Instalación vía CDN

Alternativamente, incluir el script directamente desde un CDN:

<script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>

Para módulos ES6 en navegadores modernos:

<script type="module">
  import 'https://cdn.interactjs.io/v1.9.20/auto-start/index.js'
  import 'https://cdn.interactjs.io/v1.9.20/actions/drag/index.js'
  import 'https://cdn.interactjs.io/v1.9.20/actions/resize/index.js'
  import 'https://cdn.interactjs.io/v1.9.20/modifiers/index.js'
  import 'https://cdn.interactjs.io/v1.9.20/dev-tools/index.js'
  import interact from 'https://cdn.interactjs.io/v1.9.20/interactjs/index.js'
</script>

Configuración Básica

El proceso se divide en tres pasos clave: definir el objetivo interactivo, configurar las acciones y establecer manejadores de eventos.

Definir Objetivo Interactivo

Utilizar la función interact() con un selector CSS o elemento DOM:

const elementoArrastrable = interact('.item-movible');

Configurar Acciones

Aplicar opciones como arrastre con inercia y restricciones:

elementoArrastrable.draggable({
  inertia: true,
  modifiers: [
    interact.modifiers.restrict({
      restriction: 'parent',
      endOnly: true
    })
  ],
  autoScroll: true
});

Agregar Manejadores de Eventos

Responder a eventos para actualizar la posición del elemento:

elementoArrastrable.on('dragmove', function(evento) {
  const objetivo = evento.target;
  let posX = parseFloat(objetivo.getAttribute('data-posx')) || 0;
  let posY = parseFloat(objetivo.getAttribute('data-posy')) || 0;

  posX += evento.dx;
  posY += evento.dy;

  objetivo.style.transform = `translate(${posX}px, ${posY}px)`;
  objetivo.setAttribute('data-posx', posX);
  objetivo.setAttribute('data-posy', posY);
});

Opciones Avenzadas

Personalizar el comportamiento para arrastre y redimensionamiento con parámetros específicos.

Configuración de Arastre

interact('.arrastrable').draggable({
  allowFrom: '.controlador',
  ignoreFrom: '.excluido',
  max: 1,
  inertia: {
    resistance: 10,
    minSpeed: 100,
    endSpeed: 10
  }
});

Configuración de Redimensionamiento

interact('.redimensionable').resizable({
  edges: { left: true, right: true, bottom: true, top: true },
  modifiers: [
    interact.modifiers.aspectRatio({
      ratio: 'preserve'
    })
  ]
});

Ejemplo Práctico: Control Delsizante

Implementar un slider interactivo que ajuste su valor basado en la posición de arrastre:

const controlDeslizante = interact('.control')
  .draggable({
    origin: 'self',
    inertia: true,
    modifiers: [
      interact.modifiers.restrict({
        restriction: 'self'
      })
    ]
  })
  .on('dragmove', function(evento) {
    const anchoPadre = interact.getElementRect(evento.target.parentNode).width;
    const valorCalculado = evento.pageX / anchoPadre;
    
    evento.target.style.paddingLeft = (valorCalculado * 100) + '%';
    evento.target.setAttribute('data-valor', valorCalculado.toFixed(2));
  });