¿Cómo puede alternar la funcionalidad de ajuste dinámicamente cuando se ingresa un cierto div a través de Interact JS? Me gustaría habilitar el ajuste tan pronto como se ingrese un div y deshabilitarlo tan pronto como alguien abandone el div.

Mi enfoque actual está en este entorno limitado , pero el CSS está roto (no estoy seguro de cómo solucionarlo, está tomado de aquí https://interactjs.io/docs/faq/#clone-target-draggable )

 const snap = interact.modifiers.snap({ targets: [interact.snappers.grid({ x: 30, y: 30 })], range: Infinity, relativePoints: [{ x: 0, y: 0 }] }); snap.disable(); // on enter div -> snap.enable();

Como puede ver en la imagen, los divs no están realmente alineados cuando habilito/desactivo el ajuste dinámico ya que su punto de entrada parece diferente.

Mi objetivo es alinearlos correctamente como aquí.