Unable to run basic example in a Phoenix LiveView project

[peaceful-james]

I have tried many different ways and I consistently get this error:

ncaught Error: Offset container could not be computed for the element!
    at new ne (dragdoll.js:1:13704)
    at dragdoll.js:1:17571
    at Array.map (<anonymous>)
    at ze._prepareStart (dragdoll.js:1:17564)
    at Array.<anonymous> (index.js:1:780)
    at l._processQueue (index.js:1:1133)
    at l.tick (index.js:1:2363)
ne @ dragdoll.js:1
(anonymous) @ dragdoll.js:1
_prepareStart @ dragdoll.js:1
(anonymous) @ index.js:1
_processQueue @ index.js:1
tick @ index.js:1
requestAnimationFrame (async)
e @ index.js:1
_request @ index.js:1
tick @ index.js:1
requestAnimationFrame (async)
e @ index.js:1
_request @ index.js:1
tick @ index.js:1
requestAnimationFrame (async)
e @ index.js:1
_request @ index.js:1
tick @ index.js:1
requestAnimationFrame (async)
e @ index.js:1
_request @ index.js:1
tick @ index.js:1
requestAnimationFrame (async)
e @ index.js:1
_request @ index.js:1
tick @ index.js:1
requestAnimationFrame (async)
e @ index.js:1
_request @ index.js:1
tick @ index.js:1
requestAnimationFrame (async)
e @ index.js:1
_request @ index.js:1
tick @ index.js:1
requestAnimationFrame (async)
e @ index.js:1
_request @ index.js:1
tick @ index.js:1
requestAnimationFrame (async)
e @ index.js:1
_request @ index.js:1
tick @ index.js:1
requestAnimationFrame (async)
e @ index.js:1
_request @ index.js:1
tick @ index.js:1
requestAnimationFrame (async)
e @ index.js:1
_request @ index.js:1
tick @ index.js:1
requestAnimationFrame (async)
e @ index.js:1
_request @ index.js:1
tick @ index.js:1
requestAnimationFrame (async)
e @ index.js:1
_request @ index.js:1
tick @ index.js:1
requestAnimationFrame (async)
e @ index.js:1
_request @ index.js:1
tick @ index.js:1
requestAnimationFrame (async)
e @ index.js:1
_request @ index.js:1
tick @ index.js:1
requestAnimationFrame (async)
e @ index.js:1
_request @ index.js:1
tick @ index.js:1
requestAnimationFrame (async)
e @ index.js:1
_request @ index.js:1
tick @ index.js:1
requestAnimationFrame (async)
e @ index.js:1
_request @ index.js:1
tick @ index.js:1
requestAnimationFrame (async)
e @ index.js:1
_request @ index.js:1
tick @ index.js:1
requestAnimationFrame (async)
e @ index.js:1
_request @ index.js:1
tick @ index.js:1
requestAnimationFrame (async)
e @ index.js:1
_request @ index.js:1
tick @ index.js:1
requestAnimationFrame (async)
e @ index.js:1
_request @ index.js:1
tick @ index.js:1
requestAnimationFrame (async)
e @ index.js:1
_request @ index.js:1
tick @ index.js:1
requestAnimationFrame (async)
e @ index.js:1
_request @ index.js:1
tick @ index.js:1
requestAnimationFrame (async)
e @ index.js:1
_request @ index.js:1
tick @ index.js:1
requestAnimationFrame (async)
e @ index.js:1
_request @ index.js:1
tick @ index.js:1
requestAnimationFrame (async)
e @ index.js:1
_request @ index.js:1
tick @ index.js:1
requestAnimationFrame (async)
e @ index.js:1
_request @ index.js:1
tick @ index.js:1
requestAnimationFrame (async)
e @ index.js:1
_request @ index.js:1
tick @ index.js:1
requestAnimationFrame (async)
e @ index.js:1
_request @ index.js:1
tick @ index.js:1
requestAnimationFrame (async)
e @ index.js:1
_request @ index.js:1
tick @ index.js:1
requestAnimationFrame (async)
e @ index.js:1
_request @ index.js:1
tick @ index.js:1
Show 102 more frames
Show less


index.js:1 Uncaught Error: Ticker: Can't tick before the previous tick has finished!
    at l._assertEmptyQueue (index.js:1:805)
    at l.tick (index.js:1:2185)

Any ideas on what could be going wrong? 

[niklasramo]

DragDoll depends on Tikki library, which is used to queue DOM read and write operations in some cases in DragDoll. The only time this issue should happen is if you call tick method of Tikki's Ticker before the previous tick is fully processed (event listeners called).

Could you show the code how you managed to get this happen? If we can reproduce it then I'm sure we can fix it :)

[peaceful-james]

DragDoll depends on Tikki library, which is used to queue DOM read and write operations in some cases in DragDoll. The only time this issue should happen is if you call tick method of Tikki's Ticker before the previous tick is fully processed (event listeners called).

Could you show the code how you managed to get this happen? If we can reproduce it then I'm sure we can fix it :)

I am very busy during the week but hopefully this weekend I will have time to create a demo repo.

Hopefully it is just an issue of my naive implementation.

[peaceful-james]

Hi @niklasramo I eventually made a LiveView demo project to demonstrate the problem.

Here is the link: https://github.com/peaceful-james/drgr/pull/1

[niklasramo]

Hi @peaceful-james ! And thanks a lot for the example, I got it running and found the issue.

Currently DragDoll does not support dragging static positioned elements so all you need to do to make your demo work is to set the CSS position of the dragged element to relative, absolute or fixed.

However, thinking about this, I see no reason why we would not allow dragging static elements IF there is no drag container provided. When you have specify a drag container that is different from the dragged element's parent element there are special rules that apply: https://niklasramo.github.io/dragdoll/docs/draggable.html#container

I will make it possible to drag static elements without errors, and if there arises issues with that I'll at leasr document that you must use specific position for the dragged elements.

Cheers, Niklas

[peaceful-james]

I love when the solution is simple :) Thanks for clarifying that for me.