react-beautiful-dnd可拖动对象拖动了所有内容

Question

我最近一直在尝试使用react-beautiful dnd构建类似于trello的应用程序。我能够使用可拖动元素来拖动元素，但是当我抓住要拖动的元素时，所有可拖动元素都会随之拖动。我一直在阅读react-beautiful-dnd的egghead.io课程和文档，但是仍然无法弄清为什么所有可拖动对象都在拖动。

以下是我的可投放代码示例：

            <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方法中。预先感谢您的帮助！