Question

是否可以在组件之间拖放？我有两个完全相同的组件（就数据结构和UI而言）。第一个组件上的一个按钮将展开第二个组件，我想在其中拖放项目。我相信仅使用React无法实现。

我觉得我快要走了，但是我被困住并没有改变。我将整个应用<DragDropContext>和<Draggable>设置为必要的区域。当我将项目拖到另一个组件时，它们首先尝试在该组件中的列表上放置一个位置，但它们不合适（我可能需要使用REDUX传递每个Droppable的DroppableIds），然后它们返回到它们的起点。 / p>

索引JS如下：

<DragDropContext onDragEnd={this.onDragEnd}>
                <div className="row">
                    <React.Fragment>
                        <div className="col-lg-6 col-md-6 col-sm-12 col-">
                            <ContentSelector idRef={this.idRef} />
                        </div>
                        <div className="col-lg-6 col-md-6 col-sm-12 col-xs12 pl-0">
                            <BroadcastCreation idRef={this.idRef} />
                        </div>
                        <div className="col-lg-6 col-md-6 col-sm-12 col-xs12">
                            <ScreenArea idRef={this.idRef} />
                        </div>
                        <div className="col-lg-6 col-md-6 col-sm-12 col-xs12 pl-0">
                            <Streamed />
                        </div>
                    </React.Fragment>
                </div>
</DragDropContext>

Component1如下：

map.map((item, index) => mapView.push(
            <Draggable key={item.id} draggableId={item.id} index={index}>
                {(provided, snapshot) => (
                    <div
                        ref={provided.innerRef}
                        {...provided.draggableProps}
                        {...provided.dragHandleProps}
                        style={getItemStyle(
                            snapshot.isDragging,
                            provided.draggableProps.style
                        )}
                    >

Answer 1

通过使用道具和松开头发，我设法解决了这个问题。

组件之间的DnD

1 个答案: