<script> import '@interactjs/auto-start' import '@interactjs/actions/drag' import '@interactjs/actions/resize' import '@interactjs/modifiers' import '@interactjs/dev-tools' import interact from '@interactjs/interact' // Step 1 const slider = interact('.slider') // target elements with the "slider" class slider // Step 2 .draggable({ // make the element fire drag events origin: 'self', // (0, 0) will be the element's top-left inertia: true, // start inertial movement if thrown modifiers: [ interact.modifiers.restrict({ restriction: 'self' // keep the drag coords within the element }) ], // Step 3 listeners: { move (event) { // call this listener on every dragmove const sliderWidth = interact.getElementRect(event.target).width const value = event.pageX / sliderWidth event.target.style.paddingLeft = (value * 100) + '%' event.target.setAttribute('data-value', value.toFixed(2)) } } }) </script> <style> .sliders { padding: 1.5em } /* the slider bar */ .slider { position: relative; width: 100%; height: 1em; margin: 1.5em auto; background-color: #29e; border-radius: 0.5em; box-sizing: border-box; font-size: 1em; -ms-touch-action: none; touch-action: none; } /* the slider handle */ .slider:before { content: ""; display: block; position: relative; top: -0.5em; width: 2em; height: 2em; margin-left: -1em; border: solid 0.25em #fff; border-radius: 1em; background-color: inherit; box-sizing: border-box; } /* display the value */ .slider:after { content: attr(data-value); position: absolute; top: -1.5em; width: 2em; line-height:1em; margin-left: -1em; text-align: center; }</style> <div class="sliders"> <div class="slider"></div> <div class="slider"></div> <div class="slider"></div> </div>Estoy tratando de usar interact.js en Rails 6, pero no puedo hacer que funcione. Soy un novato, por lo que esta puede ser una pregunta común, pero ¿cómo importo correctamente una biblioteca externa como interact.js? Probé todo lo que encontré en línea, así que imagino que estoy buscando algo incorrecto. Cualquier ayuda será apreciada, ¡Gracias de antemano!
esta sintaxis:
import '@interactjs/auto-start' import '@interactjs/actions/drag' import '@interactjs/actions/resize' import '@interactjs/modifiers' import '@interactjs/dev-tools' import interact from '@interactjs/interact' se utiliza para la importación de módulos npm . No puede hacer eso en el navegador sin preprocesar su código. Puede importar la biblioteca de esta manera, preferiblemente en una etiqueta de secuencia de comandos separada. Pero si planea importar solo una biblioteca, puede configurarla
<script src="CDN url"></script>Póngalo encima de su otra etiqueta de script. Encuentre un host de CDN apropiado para su biblioteca. Ejemplo: https://cdnjs.com/libraries/interact.js/1.0.2
No puede usar esas declaraciones de importación como esta. Si importa la biblioteca desde CDN, puede usarla como en la documentación. Mire https://interactjs.io/docs/installation Uso preempaquetado de CDN. Supongo que interact está expuesto globalmente y no tienes que importar nada.
Si desea seguir el camino correcto al respecto, configuraría un proyecto/carpeta separado para su aplicación frontend. Luego, esa aplicación debe compilarse y usted adjunta los archivos de distribución compilados en su HTML de Rails. Depende de tus propósitos.