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

对不起，上面写的上面的公交车上我的通勤工作在我的手机上没有看完所有代码： - ）

如果你想拥有基本的可拖动样本（来自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（如果删除函数中的public关键字，我认为这将是有效的）

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

无法使用Aurelia CLI获取aurelia-interactjs插件

1 个答案: