Cannot get aurelia-interactjs plugin to work using Aurelia CLI - aurelia

Question

I'm trying out the aurelia-interactjs plugin to see if it meets my needs. I installed it into a new aurelia cli project by following all of the installation steps. I then added code for the Dragging section of the interactjs demo. The browser console displays the following error stating that interact is not a function:
Unhandled rejection TypeError: interact is not a function. (In 'interact(this.element)', 'interact' is undefined)
attached#http://localhost:9005/node_modules/aurelia-interactjs/dist/amd/interact-draggable.js:18:21
Here's my code:
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);
}

Answer 1

I am sorry, wrote the above in the bus on my commute to work on my phone didn't read all the code :-)
If you want to have the basic draggable sample (first one from http://interactjs.io/), which allows you to just drag elements around:
app.css
.draggable {
width: 25%;
height: 100%;
min-height: 6.5em;
margin: 10%;
background-color: #29e;
color: white;
border-radius: 0.75em;
padding: 4%;
-webkit-transform: translate(0px, 0px);
transform: translate(0px, 0px);
}
app.html
<template>
<require from="app.css"></require>
<div
interact-draggable.bind="interactOptions"
interact-dragend.delegate="dragEnd($event)"
interact-dragmove.delegate="dragMoveListener($event)"
class="draggable">
<p> You can drag one element </p>
</div>
<div
interact-draggable.bind="interactOptions"
interact-dragend.delegate="dragEnd($event)"
interact-dragmove.delegate="dragMoveListener($event)"
class="draggable">
<p> with each pointer </p>
</div>
</template>
app.ts (if you remove the public keyword in the function it will be valid js I think)
export class App {
public 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.detail.dx,
y = (parseFloat(target.getAttribute('data-y')) || 0) + event.detail.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);
}
public dragEnd(event) {
var textEl = event.target.querySelector('p');
textEl && (textEl.textContent =
'moved a distance of '
+ (Math.sqrt(event.detail.dx * event.detail.dx +
event.detail.dy * event.detail.dy)|0) + 'px');
}
public interactOptions = {
// 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,
};
}