Continuing the question

I have a simple react project stackblitz (update) with react-beautiful-dnd.

 const onDragEnd = async (result) => {
    const { source, destination } = result;

    if (!destination) {
      return;
    }

    if (destination.droppableId !== source.droppableId) {
      setItems((items) =>
        items.map((item) =>
          item.id === parseInt(result.draggableId)
            ? {
                ...item,
                category: parseInt(result.destination.droppableId),
              }
            : item
        )
      );
    } else {
      const itemsCopy = [...items];
      const [removed] = itemsCopy.splice(source.index, 1);
      itemsCopy.splice(destination.index, 0, removed);

      setItems(itemsCopy);
    }
  };

....

 <DragDropContext onDragEnd={onDragEnd}>
    {categories.map((category, index) => (
      <Droppable droppableId={category.id.toString()}>
        {(provided) => (
          <div ref={provided.innerRef}>
            <Category
              key={category.id}
              provided={provided}
              category={category}
              index={index}
              items={items}
            />
          </div>
        )}
      </Droppable>
    ))}
  </DragDropContext>

How can I move categories around (drgging category)? At the moment they are static.

How can I implement dragging items from one category to another with changing the value of item.category ?

CodePudding user response：

It is exactly the same as my previous reply.

You have some DOM element you want to drop things inside, you make it a Droppable. You want something to be draggable inside a droppable you make it a Draggable.

I refactored my previous example so the categories can be moved.

https://stackblitz.com/edit/react-1j37eg?file=src/App.js

Hopefully you understand better how it works.