Interact.js - 在 Ember 中拖动单个 div “跳跃”答案

【问题标题】：Interact.js - dragging single div "jumping around" in EmberInteract.js - 在 Ember 中拖动单个 div “跳跃”
【发布时间】：2020-12-08 04:00:34
【问题描述】：

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

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

https://interactjs.io/docs/draggable

这是我所做的：

第 1 步：使用简单的 DIV 创建 Ember 模板

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

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

第 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, and dragCardPositionDelta.dy) 跟踪元素自拖动开始以来移动的像素。

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

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

任何帮助将不胜感激。

谢谢，

戴夫

【问题讨论】：

如果你把它放在一起，可能会有所帮助。
嗨@Gaurav - 我尝试设置 Ember Twiddle，但无法使用 Interact.is。我可能会再试一次。我也开始使用 Ember CodeSandbox，但也无法正常工作。
我已经创建了 twiddle，但是当我包含控制器代码时它不会呈现。这是谜语：ember-twiddle.com/…。如果你能看一看，我将不胜感激。这个简单的示例至少在本地运行并演示了不正确的行为。
我在这里修复了 interact.js 依赖：ember-twiddle.com/…
我不知道为什么，但删除origin: 'self' 解决了这个问题。

标签： ember.js draggable interact.js

【解决方案1】：

在对这个 Ember Twiddle 进行了一些实验后：https://ember-twiddle.com/b9adfc02c351f881b05c7032d18812e7?openFiles=controllers.application%5C.js%2C

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

【讨论】：