DnD между компонентами - PullRequest
Новая
       14

DnD между компонентами

0 голосов
/ 25 апреля 2019

Есть ли способ перетаскивания между компонентами? У меня два компонента абсолютно одинаковы (с точки зрения структуры данных и пользовательского интерфейса). Одна кнопка на первом компоненте расширяет второй компонент, и я хочу перетаскивать элементы между ними. Я считаю, что это не может быть достигнуто с помощью только React.

Я чувствую, что я почти на месте, но это не меняет того, что я застрял. Я сделал все мое приложение <DragDropContext> и <Draggable> 'редактировал необходимые области. Когда я перетаскиваю элементы в другой компонент, они сначала пытаются найти место в списке в этом компоненте, но они не могут поместиться (мне может понадобиться передать DroppableIds каждого Droppables с помощью REDUX), и они возвращаются в свои начальные точки.

Индекс 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>

Компонент1 следующим образом: 

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

1 Ответ

0 голосов
/ 30 апреля 2019

С помощью реквизита и выпадения волос мне удалось решить проблему.

...