Я пытаюсь найти aurelia-interactjs plugin, чтобы узнать, соответствует ли он моим потребностям. Я установил его в новый проект aurelia cli, выполнив все шаги установки. Затем я добавил код для раздела «Перетаскивание» interactjs demo. Консоль браузер отображает следующее сообщение об ошибке с указанием, что взаимодействуют не является функцией:Не удается получить плагин aurelia-interactivejs для работы с использованием Aurelia CLI
Unhandled rejection TypeError: interact is not a function. (In 'interact(this.element)', 'interact' is undefined)
[email protected]://localhost:9005/node_modules/aurelia-interactjs/dist/amd/interact-draggable.js:18:21
Вот мой код:
app.html
<template>
<div id="drag-1" interact-draggable.bind="interactjsOptions">
<p> You can drag one element </p>
</div>
<div id="drag-2" interact-draggable.bind="interactjsOptions">
<p> with each pointer </p>
</div>
</template>
app.js
export class App {
constructor() {
this.interactjsOptions = {
// enable inertial throwing
inertia: true,
// keep the element within the area of it's parent
restrict: {
restriction: "parent",
endOnly: true,
elementRect: {
top: 0,
left: 0,
bottom: 1,
right: 1
}
},
// enable autoScroll
autoScroll: true,
// call this function on every dragmove event
onmove: dragMoveListener,
// call this function on every dragend event
onend: function(event) {
var textEl = event.target.querySelector('p');
textEl && (textEl.textContent =
'moved a distance of ' +
(Math.sqrt(event.dx * event.dx +
event.dy * event.dy) | 0) + 'px');
}
};
}
}
function dragMoveListener(event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the posiion attributes
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);
}
Это ошибка, похоже, несоответствие между определением типов и фактическим кодом. Определение определяет импорт как «interactive.js», тогда как в коде он фактически «взаимодействует». Я думаю, JSPM обрабатывает это с созданием, которое он создает. В случае require/CLI это сопоставление между «interactive.js» и «взаимодействовать» не создается. Посмотрите на него и обновите пакет. –
@Erik Глядя на это дальше, я обнаружил, что использую nodejs 5.5. Не знаю, как это произошло, так как я специально помню установку v4.x. Во всяком случае, я обновился до последнего узла v6, и ошибка теперь исчезла. Однако, когда я пытаюсь перетащить, ничего не происходит (и функция dragMoveListener никогда не вызывается). –
@Erik Вы видите что-нибудь в моем коде (я совершенно новый для взаимодействия), что может привести к тому, что перетащить не получится, или вы все еще думаете, что есть ошибка, которая должна быть исправлена? –