export default function Item({ id, index }) { return ( <Draggable draggableId={id} index={index}> {({ draggableProps, dragHandleProps, innerRef }) => ( <div ref={innerRef} {...draggableProps} {...dragHandleProps} style={{ ...draggableProps.style, }} > <Typography.Text ellipsis style={{ maxWidth: '100%' }}> <DragOutlined style={{ marginRight: 8 }} /> {id} </Typography.Text> </div> )} </Draggable> ); }
export default function DroppableArea({ pivotConfig, axis }) { return ( <> <Typography.Text strong style={{ display: 'flex', justifyContent: 'center', }} > {axis} </Typography.Text> <Droppable droppableId={axis}> {(provided) => ( <div ref={provided.innerRef} {...provided.droppableProps} style={{ height: '100%' }} > {pivotConfig[axis].map((id, index) => ( <Item key={id} id={id} index={index} /> ))} {provided.placeholder} </div> )} </Droppable> </> ); }
export default function OrderGroup({ orderMembers, onOrderChange, onReorder }) { return ( <DragDropContext onDragEnd={({ source, destination }) => { onReorder(source && source.index, destination && destination.index); }} > <Droppable droppableId="droppable"> {(provided) => ( <div ref={provided.innerRef} {...provided.droppableProps}> {orderMembers.map(({ id, title, order }, index) => ( <DraggableItem key={id} id={id} index={index} order={order} onOrderChange={onOrderChange} > {title} </DraggableItem> ))} {provided.placeholder} </div> )} </Droppable> </DragDropContext> ); }
<DragDropContext onDragEnd={({ source, destination, ...props }) => { if (!destination) { sourceIndex: source.index, destinationIndex: destination.index, sourceAxis: source.droppableId, destinationAxis: destination.droppableId, callback(updatedPivotConfig) { setUIPivotConfig(updatedPivotConfig);
render() { const { taskType } = this.props; return ( <Droppable droppableId={`droppable-${taskType}`}> {(provided) => this.renderWithDragProvider(provided)} </Droppable> ); }
render() { return ( <div> <Header /> <DragDropContext onDragEnd={this.onDragEnd}> <main className='grid'> <List name="unseated" data={this.state.unseated} /> <List name="pod1" data={this.state.pod1} /> <List name="pod2" data={this.state.pod2} /> </main> </DragDropContext> </div> ); }
render() { return ( <Draggable draggableId={this.props.task.id} index={this.props.index}> {provided => ( <Container {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef} > {this.props.task.content} </Container> )} </Draggable> ); }
render() { const { boardItems } = this.props; return ( <BoardWrapper> <DragDropContext onDragEnd={this.onDragEnd}> {boardItems.columns.map(column => { return <Column key={column.id} column={column} />; })} </DragDropContext> </BoardWrapper> ); }
const DragDropList = ({ list, listElement, updateList }) => { return ( <DragDropContext onDragEnd={result => onDragEnd(result, list, updateList)}> <Droppable droppableId="droppable"> {provided => ( <div {...provided.droppableProps} ref={provided.innerRef}> {renderListViewItems(list, listElement)} {provided.placeholder} </div> )} </Droppable> </DragDropContext> ); }
render() { return ( <Container> <DragDropContext onDragEnd={this.onDragEnd}> {this.state.columnOrder.map((columnId) => { const column = this.state.columns[columnId] const tasks = column.taskIds.map(e => { return this.state.tasks[e] }) return <Column key={column.id} column={column} tasks={tasks} />; })} </DragDropContext> </Container> ) }
render() { const { task, index } = this.props; return ( <Draggable draggableId={`draggable-${task.status}-${index}`} index={index}> {(provided) => this.renderWithProvided(provided)} </Draggable> ); }
export default function({ task, index }) { return ( <Draggable draggableId={task.id} index={index} type="task"> {(provided, snapshot) => ( <Container {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef} isDragging={snapshot.isDragging} > {task.content} </Container> )} </Draggable> ); }
render(){ let {quote,type,index}=this.props; return( <Draggable key={quote.id} draggableId={type} type={type} index={index}> {(provided: DraggableProvided, snapshot: DraggableStateSnapshot) => ( <div ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps} > <p>{type}---;{quote.id}-;{index}</p> </div> )} </Draggable> ) }
render() { const { imageUrl, index } = this.props; return ( <Draggable draggableId={`draggable-${index}`} index={index}> {(provided) => ( <Container ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps} > <ImageContainer src={imageUrl} /> </Container> )} </Draggable> ); }