Interact.js

Question

我正在使用 Ember，我正在尝试使用 interact.js 库设置一个简单的可拖动 div 示例，但我遇到了一些问题。

我知道库不会修改 DOM，您需要自己修改，这很好。我正在按照网站上的示例进行操作，但我将其翻译为 Ember:

这是我所做的：

第 1 步：使用简单的 DIV

创建一个 Ember 模板

<div
    role="button"
    class="draggable-card w-20 h-20"
/>

当我调用控制器中的交互库时，“draggable-card”标签将变为“interactive”。

步骤 #2：创建一个 Ember 控制器

控制器作为“代码隐藏”运行并控制状态。在这种情况下，我们的控制器做了很多事情：

2.1 调用 Interact 库以使 DOM 对象“交互”（即可拖动）

this.draggableCards = interact('.draggable-card');

this.draggableCards.draggable({
    origin: 'self',
    inertia: false,
    listeners: {
        start: this.dragStart,
        move: this.dragMove,
        end: this.dragEnd
    }
});

这使得所有“可拖动卡片”元素都可以拖动，并为 dragStart、dragMove 和 dragEnd 创建拖动处理程序。

2.2 创建 dragStart 事件处理程序

@action
dragStart(event) {
    this.isDraggingCard = true;

    // modify dom to support dragging the element
    event.target.style.position = 'relative';
    event.target.style.touchAction = 'none';
    event.target.style.userSelect = 'none';       
    event.target.style.left = '0px';
    event.target.style.top = '0px';

    // used to track position from start of drag
    this.dragCardPositionDelta = { dx: 0, dy: 0 };     
};

2.3 创建 dragMove 事件处理程序

@action
dragMove(event) {
    this.dragCardPositionDelta.dx += event.dx;
    this.dragCardPositionDelta.dy += event.dy;

    event.target.style.transform =
        `translate(
            ${this.dragCardPositionDelta.dx}px,
            ${this.dragCardPositionDelta.dy}px
        )`;
};

据我所知，(event.dx, event.dy) 提供自上次调用 dragMove 以来元素移动的像素数。我跟踪 (dragCardPositionDelta.dx, 和 dragCardPositionDelta.dy) 跟踪元素自拖动开始以来移动的像素。

设置此项使元素可拖动，但 (event.dx、event.dy) 在我拖动时似乎计算不正确。结果是 div 在这个地方跳来跳去。我还注意到 div 与指针的移动不一致。这一切都很奇怪，鉴于网站上的示例非常简单，我不确定出了什么问题。我只能怀疑某些 (event.dx, event.dy) 没有被正确计算。

我已经用另一个库设置了一个类似的例子：Draggabilly (https://draggabilly.desandro.com) 它几乎开箱即用，但由于一些问题我暂时放弃了它，因此尝试 Interact.js.

如有任何帮助，我们将不胜感激。

谢谢，

戴夫

Answer 1

经过一些试验 Ember Twiddle：https://ember-twiddle.com/b9adfc02c351f881b05c7032d18812e7?openFiles=controllers.application%5C.js%2C

我发现从对 draggable 的调用中删除 origin: 'self' 可以修复跳转问题。不知道为什么。

Interact.js - 在 Ember 中拖动单个 div "jumping around"

Interact.js - dragging single div "jumping around" in Ember

ember.js

draggable