Giters

kalcifer / ember-dragula

Simple drag and drop with dragula and ember

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Problems with Ember 2.10

tmeloliveira opened this issue · comments

commented

I've just updated my project to the latest version of Ember.js (2.10.0) which comes with Glimmer 2 enabled by default and I'm getting multiple errors when I try to drag and drop my elements. They come in three types:

Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

Uncaught Error: Cannot call next() on an empty iterator

With the previous version of Ember I was using, 2.8.0 it was working just fine.

Any thoughts on that?

commented

Hey @tmeloliveira - I am currently out of touch with the Ember ecosystem and thus have not tried Glimmer.
However any PR's are welcome!

commented

@pksjce thanks for the reply!

Just one more question...
I was looking at this issue on dragula:
bevacqua/dragula#188 (comment)

It seems there could be a workaround, but I would need to access drake.
Is there a way I can do this via ember-dragula?

I wanted to run this drake.cancel(true)...

commented

It seems there could be a workaround, but I would need to access drake.
Is there a way I can do this via ember-dragula?

@tmeloliveira check https://github.com/kalcifer/ember-dragula#advanced-usage.

commented

@oskarrough thanks for the help!

But I wanted to access drake in my JS code... Not in the template...

In my component, lets say I have something similar to this:

{{#ember-dragula config=dragulaconfig drop='updateItem' as |drake|}}
    <div>
        {{#ember-dragula-container drake=drake}}
            <div>drag me</div>
            <div>or me</div>
        {{/ember-dragula-container}}
    </div>
{{/ember-dragula}}

But I want to call drake.cancel(true) from within the updateItem event handler.

commented

Ah right, I haven't tried it but perhaps the drake instance is available as the second argument in the event handlers?

https://github.com/kalcifer/ember-dragula/blob/master/addon/components/ember-dragula.js#L37

commented

Well, that solved my issue @oskarrough!

Thank you so much for the help! I have been fighting this bug for quite some time!

But... I think there is a problem with the versioning of ember-dragula. This line of code you mentioned in your comment was not present in my version of the addon in node_modules!

"ember-dragula": "1.9.3",

I only saw that because I had forked the project, and was using my version of it...
So I'm only getting the latest code if I import like this:

"ember-dragula": "https://github.com/kalcifer/ember-dragula.git",

Would this be related to the git tag?

commented

If anyone is interested, there is more discussion on the original bug here:
glimmerjs/glimmer-vm#358

My solution was to "cancel" the drop event... and then I would update the model and let ember do the re-rendering!

commented

Seems the change to include drake in the event arguments hasn't been released yet. We could try to ping @kalcifer for a new release :)

commented

@oskarrough - Would be happy to give you access to the repo for new releases. Sorry for the delay!