1

What's happening is when I have multiple items in a column and attempt to drag one, only one is shown and according to the lessons found here I should be at the point where I can move items within the same column but can not. In React dev tools state and r-b-dnd ids look good, but what do I know? I'm just a rookie. Here is what I have in my onDragEnd so far. 

  onDragEnd = result => {
    const { destination, source, draggableId } = result;
    if (!destination) return;
    if (
      destination.droppableId === source.droppableId &&
      destination.index === source.index
    ) {
      return;
    }
    let start = this.state.list[source.droppableId];
    let finish = this.state.list[destination.droppableId];
    if (start === finish) {
      let updatedList = this.state.list.map(obj => {
        if (obj.id === source.droppableId) {
          obj.cards.splice(source.index, 1);
          obj.cards.splice(destination.index, 0, draggableId);
        }
        return obj;
      });
      this.setState({ list: updatedList });
    }

And my app can be found here. Thanks.

kn0t
  • 303
  • 6
  • 13

1 Answers1

4

In your code, in onDragEnd you have this code which is why you can't rearrange items on same list. When you move items across same list, source and destination Droppable IDs will be same.

if (destination.droppableId === source.droppableId && destination.index === source.index) {
  console.log("they're equal");
  return;
}
  1. On your component, the dragabble ID is same for all items in the list. It should be unique for every draggable item.
const Card = props => {
  return (
    // This is NOT unique. This should be dynamic, we should use idx probably.
    <Draggable draggableId={props.col + "-" + props.color} index={props.idx}>
      {provided => (

After correcting these two, Im able to move items: https://codesandbox.io/s/r5z28w85yo. Hope this is helpful.

Avanthika
  • 3,984
  • 1
  • 12
  • 19
  • YES! Thanks so very much. Is there anything else I should be careful of? I think the tutorial is a little dated but basically it's just applying the correct state for the move... right? – kn0t Mar 30 '19 at 21:31
  • I think your code is good. We just need unique identifiers for draggables and droppables. And I didn't see the logic for moving between the lists - is that not part of your requirement? – Avanthika Mar 30 '19 at 21:34
  • Yes but again I'm new at this so if you look @ my onDragEnd it's just what I could glean from the video lesson to that point. I was thinking something similar to what I have to move cards between columns. – kn0t Mar 30 '19 at 21:38