React-beautiful-dnd: Where can i find example for drag and drop item between board?

[khoaanh2212]

Where can i find example for drag and drop item between board?
Thanks

[loaibassam]

Plutio.com ;)

[khoaanh2212]

I mean simply example code for use board

[maasha]

I believe the example code is here. However, what exactly allows dragging and dropping between two seperate lists elude me. The docs are more confusing than helpful on this :o(

[alexreardon]

The current stories are a bit unapproachable. We have built them to handle multiple use cases with the same components - which leaves things hard to read. They are primarily to show off the library rather than for people to copy. I think a readable example would be helpful and could be done as part of #163.

Setting up a board is actually much easier than you might expect:

Simply set up multiple Droppable components with the same type and you are good to go (you can also just ignore the type prop and the default type will be used). For a board you will simply need to set up the Droppables horizontally next to each other. It is really that easy!

[khoaanh2212]

I have two board and i don't know how can i drag an item from Board1 and drop it in Board2.Would you like to give me an example code for it?
thanks

[crapthings]

@loaibassam react-beautiful-dnd?

[alexreardon]

@khoaanh2212 if you set up your Droppables to have the same type you should be able to move between boards. A board is just a collection of Droppables

[khoaanh2212]

<DragDropContext onDragEnd={this.onDragEnd}>
          <Droppable droppableId="droppable" type="BOARD">
            {(provided, snapshot) => (
              <div
                ref={provided.innerRef}
                style={getListStyle(snapshot.isDraggingOver)}
              >
                {this.state.items.map(item => ( //eslint-disable-line
                  <Draggable key={item.id} draggableId={item.id}>
                    {(provided, snapshot) => ( //eslint-disable-line
                      <div>
                        <div
                          ref={provided.innerRef} style={getItemStyle(
                            provided.draggableStyle,
                            snapshot.isDragging
                          )}
                        >
                          <i
                            className="fa fa-close"
                            {...provided.dragHandleProps}
                          />
                          {item.content}
                        </div>
                        {provided.placeholder}
                      </div>
                    )}
                  </Draggable>
                ))}
                {provided.placeholder}
              </div>
            )}
          </Droppable>
          <Droppable droppableId="droppableTemp" type="BOARD">
            {(provided, snapshot) => (
              <div
                ref={provided.innerRef}
                style={getListStyle(snapshot.isDraggingOver)}
              >
                {this.state.itemsTemp.map(item => ( //eslint-disable-line
                  <Draggable key={item.id} draggableId={item.id}>
                    {(provided, snapshot) => ( //eslint-disable-line
                      <div>
                        <div
                          ref={provided.innerRef} style={getItemStyle(
                            provided.draggableStyle,
                            snapshot.isDragging
                          )}
                        >
                          <i
                            className="fa fa-close"
                            {...provided.dragHandleProps}
                          />
                          {item.content}
                        </div>
                        {provided.placeholder}
                      </div>
                    )}
                  </Draggable>
                ))}
                {provided.placeholder}
              </div>
            )}
          </Droppable>
        </DragDropContext>

my code like this,and it doesn't work,would you like to show me where is wrong

[alexreardon]

As per our ISSUE_TEMPLATE can you please provide a demo for us to play with. Here is the boilerplate you can start from: https://www.webpackbin.com/bins/-Kr9aE9jnUeWlphY8wsw

[khoaanh2212]

i've just updated code on https://www.webpackbin.com/bins/-Kr9aE9jnUeWlphY8wsw. and it was failed.would you like to look at this?

[crapthings]

@khoaanh2212 that is same webpackbin url with working one, you should save then copy pasty the different one

this one works
https://www.webpackbin.com/bins/-Kr9aE9jnUeWlphY8wsw

[khoaanh2212]

ok this one was edited
https://www.webpackbin.com/bins/-L2OaDyyGg6KhzWGVQrX

[crapthings]

@khoaanh2212
its missing a node under DragDropContext
and React v16.2.0: Improved Support for Fragments

https://reactjs.org/blog/2017/11/28/react-v16.2.0-fragment-support.html

this one can render, but it won't save the state, u might have to fix the onDragEnd
https://www.webpackbin.com/bins/-L2Ogx4KEtSsUNwsfi45

to my understanding, you're trying to make this...

https://react-beautiful-dnd.netlify.com/?selectedKind=multiple%20vertical%20lists&selectedStory=stress%20test&full=0&down=1&left=1&panelRight=0&downPanel=storybook%2Factions%2Factions-panel

check the example code

https://github.com/atlassian/react-beautiful-dnd/blob/master/stories/src/multiple-vertical/quote-app.jsx

[khoaanh2212]

@crapthings can we do like @alexreardon way?multi Droppable in one DragDropContext.with the same type so we can drag and drop from an DroppableId to another DroppableId

[crapthings]

@khoaanh2212 i think its okay, check this

It is advised to just wrap your entire application in a DragDropContext. Having nested DragDropContext's is not supported.

https://github.com/atlassian/react-beautiful-dnd#dragdropcontext

In order to use drag and drop, you need to have the part of your React tree that you want to be able to use drag and drop in wrapped in a DragDropContext. It is advised to just wrap your entire application in a DragDropContext. Having nested DragDropContext's is not supported. You will be able to achieve your desired conditional dragging and dropping using the props of Droppable and Draggable. You can think of DragDropContext as having a similar purpose to the react-redux Provider component

[khoaanh2212]

@crapthings i've updated React to 16.2.0 but the error still there,DragDropContext doesn't allow multi Droppable inside?

[crapthings]

@khoaanh2212
have u wrapper it in [] or <> <> ?

https://github.com/facebook/react/issues/2127

https://reactjs.org/blog/2017/11/28/react-v16.2.0-fragment-support.html

---

should work

<DragDropContext onDragEnd={this.onDragEnd}>
  <>
    <Droppable droppableId="droppable1">
    ...
    </Droppable>

    <Droppable droppableId="droppable2">
    ...
    </Droppable>
  <>
</DragDropContext>

fail

render () {
  return (
    <div>failed to render</div>
    <div>failed to render</div>
  )
}

work

render () {
  return (
    <div>
      <div>work</div>
      <div>work</div>
    </div>
  )
}

dont want extra div

render () {
  return (
    [
      <div>work</div>
      <div>work</div>
    ]
  )
}

or

render () {
  return (
    <>
      <div>work</div>
      <div>work</div>
    <>
  )
}

maybe u need return array

or

render () {
  return (
    {this.props.decks.map(deck => (
    <Fragment key={deck.id}>
      <div>work</div>
      <div>work</div>
    </Fragment>
    )}
  )
}

[khoaanh2212]

<DragDropContext onDragEnd={this.onDragEnd} type="EXAMPLE">
          <Droppable droppableId="droppable" type="EXAMPLE">
          </Droppable>
          <Droppable droppableId="droppableTemp" type="EXAMPLE">
          </Droppable>
        </DragDropContext>

i wrap like this

[khoaanh2212]

   <DragDropContext onDragEnd={this.onDragEnd} type="EXAMPLE">
        <div>
          <Droppable droppableId="droppable" type="EXAMPLE">
          </Droppable>
          <Droppable droppableId="droppableTemp" type="EXAMPLE">
          </Droppable>
</div>
        </DragDropContext>

that's work.thanks alot @crapthings .that's awesome

[HazemEngMuh]

@loaibassam Could you provide us your board example?
Did you use board or column tags ?
or from props did it ?
How to set Vertical List settings ?

[stahlmanDesign]

@loaibassam @alexreardon I forked the example Simple DnD between two lists:
https://codesandbox.io/s/l7ro2231o7

and made it work for three or more lists:
https://codesandbox.io/s/qlkpzn54j6

It could still be cleaned up a bit but it should help people on the right path

[manuelbasanta]

Thanks a lot @stahlmanDesign !
Instead of making a function for matching Droppables ids and states I just used the same name for both. I don't really know if that's recommended.

[shariqmagic]

Hi, I am trying to develop a multiple drag and drop list . Suppose a drag list contains 4 objects and these 4 draggable objects will drop in 4 different droppable objects div. The onDragend event does not give me enough data to much the drag and drop condtion. Like wise we do in jquery we can set multiple drag and drop (one to one, many to one , many to many).

Please if you do have any reference then please let me know.

[alexreardon]

Check out our multi drag pattern

[shariqmagic]

wrong url

[abhidnyag]

Check out our multi drag pattern

How can we drag multiple items at once (UI) in a board view?