Unable to use this with ReactJS

[ghoshnirmalya]

I've the following html structure:

<div className="items__food">
  <div className="food food--apple">
    <img src={Apple} alt="Apple" />
  </div>
  <div className="food food--banana">
    <img src={Banana} alt="Banana" />
  </div>
  <div className="food food--bread">
    <img src={Bread} alt="Bread" />
  </div>
</div>

And in my componentDidMount, I'm doing:

new Draggable(document.querySelectorAll('.items__food'))
  .on('drag:start', () => console.log('drag:start'))
  .on('drag:move',  () => console.log('drag:move'))
  .on('drag:stop',  () => console.log('drag:stop'));

However, I'm unable to drag any .food items and as a result, nothing is outputted on the console.

As you can see that `.items__food` isn't empty inside the `componentDidMount` lifecycle hook. Am I missing something here?

[fighella]

Interested to see how to integrate with React - I had some strange behaviour with elements duplicating. :)

[alex35mil]

I don't think you can do this (well, you can, but you shouldn't), b/c react is not aware of what draggable does to your DOM nodes so react is unable to compute valid DOM representation for the next render.

[fighella]

I will park that idea for now then. =) ref: https://reactjs.org/docs/integrating-with-other-libraries.html

[sltenorio99]

I just encountered the issue with react not being aware of the DOM manipulation draggable does. Since draggable does it on the fly while dragging, there's no way to cancel it (from what I can see) like you can with the alike jQuery UI Sortable and let React do it instead.

[jdittrich]

I would love to have integration with MVVM-libraries, too.

[tsov]

@ghoshnirmalya should definitely work with React. You would also need to override the componentDidUpdate to figure out if, e.g. children elements have changed, or you could see if a sortable:sorted has fired (implementation is up to you). Or you could also just return false within componentDidUpdate which tells react to never re-render.

There are plans on releasing a react component as a separate bundle for this repo.

Since draggable does it on the fly while dragging, there's no way to cancel it

@STenorio99 this is true, Sortable, Swappable and Droppable do DOM manipulations as you drag around, as supposed to on drag end. This makes this draggable library different than others, but we could add a traditional sortable module (built on top of Draggable) that performs DOM manipulation on drag end instead.

You can cancel most DOM manipulations via canceling events, e.g.

new Swappable(containers)
  .on('swappable:swapped', (event) => event.cancel())

We are missing the cancelable action for sortable:sorted, but we can easily add it, which is the plan. It would work like swappable https://github.com/shopify/draggable#events-3

I hope that answered a lot of the questions in this issue?

[cheri1977]

Awesome

[hadifarnoud]

We are working on React html editor, making it easy to use this library would make our editor a lot more awesome!

[pie6k]

Do you have any, even very basic and simple example of React component using it?

[hadifarnoud]

We do not. that was supposed to be a motivational comment to add react support/docs soon

[jefflam]

While we're at it, what about other frameworks such as VueJS?

[ghoshnirmalya]

@jefflam #18.

[bondz]

There are plans on releasing a react component as a separate bundle for this repo.

React support would be awesome.

[Diogomartf]

Yeah, I would love to see React support! Thanks for the library