New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

obtain reference to react component on clone #14

Open
cristian-dan opened this Issue Jun 2, 2016 · 2 comments

Comments

Projects
None yet
2 participants
@cristian-dan

cristian-dan commented Jun 2, 2016

dragula([container1,container2], {
        direction: 'horizontal',
        copy: function(el, source) {
            return source === container1
        },
        accepts: function(el, target) {
            return target !== container1
        },
        removeOnSpill: true
      }).on('cloned', function(clonedElement,clonedFrom) {
        reactComp = // how do i get the react component from clonedFrom dom?, can 'cloned' event return the react component too?
      });

how do i get the react component from clonedFrom dom node?, can 'cloned' event return the react component too?
thanks

@cristian-dan

This comment has been minimized.

cristian-dan commented Jun 2, 2016

and how do I delete the clonedElement after it has been placed there so that I can make a new react component in its place?

cloned fires even when a shadow copy is made, so I have to do it on drag end, but then I don't know if it was a drag clone end, or just a drag order end
please help

@Nolski

This comment has been minimized.

Nolski commented Sep 22, 2016

I stored a key from the state in the element that's dragable.

<div ref="items>
    <div class="draggable-item" data-key="{key}">...</div>
    ...
</div>

and then in javascript I accessed that key by just doing simple dom lookups

Dragula([this.refs.items])
    .on('drop', (el, target, source, sibling) => {
       let key = $(el).data('key') // This is using jquery.
        // this is the corresponding react object being dropped
        let item = this.state.items.find((item) => { item.key === key }); 
    });
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment