[英]Trouble using external javascript libraries in rails 6.0.0
<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>
I'm trying to use interact.js in rails 6, but I cannot get it to work.我正在尝试在 rails 6 中使用 interact.js,但我无法让它工作。 I am a newbie so this may be a common question, but how do I properly import an external library like interact.js.
我是一个新手,所以这可能是一个常见问题,但我如何正确导入一个外部库,如interact.js。 I've tried everything I've found online so I imagine I'm looking for the wrong thing.
我已经尝试了我在网上找到的所有东西,所以我想我正在寻找错误的东西。 Any help will be appreciated, Thanks in advance!
任何帮助将不胜感激,在此先感谢!
this syntax:这个语法:
import '@interactjs/auto-start'
import '@interactjs/actions/drag'
import '@interactjs/actions/resize'
import '@interactjs/modifiers'
import '@interactjs/dev-tools'
import interact from '@interactjs/interact'
is used for npm
modules import.用于
npm
模块导入。 You can't do that in the browser without preprocessing your code.如果不对代码进行预处理,您将无法在浏览器中执行此操作。 You can import the library like this, preferably in a separate script tag.
您可以像这样导入库,最好是在单独的脚本标签中。 But if you plan to import only one library you can set it
但是如果你打算只导入一个库,你可以设置它
<script src="CDN url"></script>
Put it above your other script tag.把它放在你的其他脚本标签之上。 Find an appropriate CDN host for your library.
为您的图书馆寻找合适的 CDN 主机。 Example: https://cdnjs.com/libraries/interact.js/1.0.2
示例: https ://cdnjs.com/libraries/interact.js/1.0.2
You can't use those import statements like this.你不能像这样使用那些导入语句。 If you import the library from CDN, you can use it like in the documentation.
如果从 CDN 导入库,则可以像在文档中一样使用它。 Look at https://interactjs.io/docs/installation CDN pre-bundled usage.
查看https://interactjs.io/docs/installation CDN 预捆绑使用。 I presume
interact
is globally exposed and you don't have to import anything.我认为
interact
是全球公开的,您不必导入任何东西。
If you want to go the proper way about this, you would be setting up a separate project/folder for your frontend application.如果您想以正确的方式解决此问题,您将为您的前端应用程序设置一个单独的项目/文件夹。 That application has to be then built, and you attach the built distribution files in your Rails HTML.
然后必须构建该应用程序,并将构建的分发文件附加到 Rails HTML 中。 It depends on your purposes.
这取决于你的目的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.