我正在尝试aurelia-interactjs plugin以查看它是否符合我的需求。我按照所有安装步骤将其安装到新的aurelia cli项目中。然后,我添加了代码interactjs demo的拖动部分。浏览器控制台显示下面的错误,说明互动不是一个函数:无法使aurelia-interactjs插件使用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);
}
这是一个错误,似乎有打字稿定义和实际代码之间的不一致。该定义将导入指定为“interact.js”,而在代码中它实际上是“交互”。 JSPM使用我认为创建的映射来处理它。在require/CLI情况下,不会创建“interact.js”和“interact”之间的映射。将研究它并更新包。 –
@Erik深入探讨这一点,我发现我正在使用nodejs 5.5。不知道这是如何发生的,因为我特别记得安装v4.x.无论如何,我升级到最新的节点v6,现在错误消失了。但是,当我尝试拖动时,没有任何反应(并且dragMoveListener函数永远不会被调用)。 –
@Erik你是否看到我的代码中有任何东西(我对interactjs完全陌生)可能导致拖动失败或者仍然认为有需要修复的错误? –