<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>
我正在嘗試在 rails 6 中使用 interact.js，但我無法讓它作業。我是一個新手，所以這可能是一個常見問題，但我如何正確匯入一個外部庫，如interact.js。我已經嘗試了我在網上找到的所有東西，所以我想我正在尋找錯誤的東西。任何幫助將不勝感激，在此先感謝！
uj5u.com熱心網友回復：
這個語法：
import '@interactjs/auto-start'
import '@interactjs/actions/drag'
import '@interactjs/actions/resize'
import '@interactjs/modifiers'
import '@interactjs/dev-tools'
import interact from '@interactjs/interact'
用于npm模塊匯入。如果不對代碼進行預處理，您將無法在瀏覽器中執行此操作。您可以像這樣匯入庫，最好是在單獨的腳本標簽中。但是如果你打算只匯入一個庫，你可以設定它
<script src="CDN url"></script>
把它放在你的其他腳本標簽之上。為您的圖書館尋找合適的 CDN 主機。示例：https ://cdnjs.com/libraries/interact.js/1.0.2
你不能像這樣使用那些匯入陳述句。如果從 CDN 匯入庫，則可以像在檔案中一樣使用它。查看https://interactjs.io/docs/installation CDN 預捆綁使用。我認為interact是全球公開的，你不必匯入任何東西。
如果您想以正確的方式解決此問題，您將為您的前端應用程式設定一個單獨的專案/檔案夾。然后必須構建該應用程式，并將構建的分發檔案附加到 Rails HTML 中。這取決于你的目的。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/482964.html
上一篇：回圈嵌套陣列時發生沖突的基準測驗