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

I'm using Ember, and I'm trying to setup a simple draggable div example using the interact.js library but I'm having some issues.

I'm aware that the library DOES NOT modify the DOM and you need to do that yourself which is fine. I'm following the example on the website but I translating it to Ember:

https://interactjs.io/docs/draggable

Here's what I've done:

Step #1: Create an Ember template with a simple DIV

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

The "draggable-card" tag will be made "interactive" when I make the call to the interact library in the controller.

Step #2: Create an Ember controller

The controller runs as "code behind" and controls state. In this case our controller does a number of things:

2.1 Makes a call to the Interact library to make DOM objects "interactive" (i.e. draggable)

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

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

This makes all "draggable-card" elements draggable as well as creating drag handlers for dragStart, dragMove and dragEnd.

2.2 Create a dragStart event handler

@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 Create a dragMove event handler

@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
        )`;
};  

As far as I understand things, (event.dx, event.dy) provides the number of pixels the element has been moved since the last call to dragMove. I keep track of (dragCardPositionDelta.dx, and dragCardPositionDelta.dy) which tracks the pixels the element has moved since the start of the drag.

Setting this up makes the element draggable, but (event.dx, event.dy) doesn't seem to be calculating correctly as I drag. The result is that the div jumps around the place. I also notice that the div doesn't move consistently with the pointer. It's all very strange and given how simple the example on the website is I'm not sure what's going wrong. I can only suspect that for some (event.dx, event.dy) is not being calculated correctly.

I've setup a similar example with another library: Draggabilly (https://draggabilly.desandro.com) and it pretty much worked out of the box but I've temporarily abandoned it due to some issues, thus trying out Interact.js.

Any help would be appreciated.

Thanks,

Dave