Javascript 反应漂亮的dnd拖拽物拖拽一切

Javascript 反应漂亮的dnd拖拽物拖拽一切,javascript,reactjs,react-beautiful-dnd,Javascript,Reactjs,React Beautiful Dnd,我最近一直在尝试使用dnd构建一个类似trello的应用程序。我可以通过拖拽来拖拽元素,但是当我抓取一个元素来拖拽时,所有的拖拽元素都会随之拖拽。我已经阅读了dnd的egghead.io课程和文档,但仍然无法理解为什么所有的拖拽功能都在拖拽 以下是我的droppable代码示例: <div> <Droppable droppableId={toString(this.props.column.column_id)}>

我最近一直在尝试使用dnd构建一个类似trello的应用程序。我可以通过拖拽来拖拽元素,但是当我抓取一个元素来拖拽时,所有的拖拽元素都会随之拖拽。我已经阅读了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>

{提供=>(
{this.props.column.column_name}
{this.state.tasks.map((taskData,i)=>)}
{提供的.占位符}
)}
下面是我的可拖动项目的代码:

            <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>

{提供=>(
{this.props.task.task}
)}

它们都在类组件的render方法内部。提前感谢您的帮助

继续浏览文档后,我发现问题在于droppableId和DragTableID在DragDropContext中并非完全唯一。我可以通过确保它们是唯一的值来修复它。

你能用这个行为创建一个codesandbox吗?实际上我刚刚修复了它。事实证明,我的DragTableId和droppableId在DragDropContext中不是完全唯一的。谢谢你愿意帮忙!