Cannot get aurelia-interactjs plugin to work using Aurelia CLI

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,
  };
}