Aurelia CLIを使用してaurelia-interactjsプラグインを動作させることができません

Question

私はaurelia-interactjs pluginを試しています。すべてのインストール手順に従って、新しいaurelia cliプロジェクトにインストールしました。私はinteractjs demoのドラッグセクションのコードを追加しました。ブラウザのコンソールは、その相互作用を述べる次のエラーが関数ではありません表示されます。

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 

ここに私のコードです：

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

私は申し訳ありませんが、私の通勤のバスに上記のすべてのコードを読んでいないすべてのコードを読んでいない:-)

あなたが基本的なドラッグ可能なサンプル（最初の1つはhttp://interactjs.io/）

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を（あなたは、関数Iにpublicキーワードを削除する場合：あなただけの周りの要素をドラッグすることができますtは有効なjsだと思います）

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