我想不出该如何移动栏目

// 示例：使用React实现一个可拖放的栏目组件
import React, { useState } from 'react';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';

const initialColumns = {
  'column-1': ['item-1', 'item-2'],
  'column-2': ['item-3']
};

function App() {
  const [columns, setColumns] = useState(initialColumns);

  function onDragEnd(result) {
    // 实现拖放逻辑
  }

  return (
    <DragDropContext onDragEnd={onDragEnd}>
      {Object.entries(columns).map(([columnId, items]) => (
        <Droppable key={columnId} droppableId={columnId}>
          {(provided) => (
            <div {...provided.droppableProps} ref={provided.innerRef}>
              {items.map((item, index) => (
                <Draggable key={item} draggableId={item} index={index}>
                  {(provided) => (
                    <div
                      {...provided.draggableProps}
                      {...provided.dragHandleProps}
                      ref={provided.innerRef}
                    >
                      {item}
                    </div>
                  )}
                </Draggable>
              ))}
              {provided.placeholder}
            </div>
          )}
        </Droppable>
      ))}
    </DragDropContext>
  );
}

export default App;

/* 示例：使用Flexbox实现响应式布局 */
.container {
  display: flex;
  flex-wrap: wrap;
}

.column {
  flex: 1 1 300px; /* 每个栏目至少300px宽，并且可以增长和收缩 */
}