我最近一直在尝试使用 react-beautiful dnd 构建一个类似 trello 的应用程序。我可以让可拖动元素来拖动元素,但是当我抓住要拖动的元素时,所有可拖动元素都会随之拖动。我一直在阅读 react-beautiful-dnd 的 egghead.io 课程和文档,但仍然无法弄清楚为什么所有的可拖动对象都在拖动。
这是我的 droppable 代码示例:
<div>
<Droppable droppableId={toString(this.props.column.column_id)}>
{provided => (
<div
ref={provided.innerRef}
{...provided.droppableProps}
className='task-columns'
>
{this.props.column.column_name}
{this.state.tasks.map((taskData, i) => <Tasks key={taskData.task_id} task={taskData} index={i}/> )}
{provided.placeholder}
</div>
)}
</Droppable>
</div>
这是我的可拖动项目的代码:
<Draggable draggableId={toString(this.props.task.task_id)} index={this.props.index}>
{provided => (
<div
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
>
{this.props.task.task}
</div>
)}
</Draggable>
这些都在类组件的 render 方法中。在此先感谢您的帮助!