我尝试使用“react-beautiful-dnd”,并在现有项目中实施。我正在使用的软件包版本是 10.1.1,因为我不能使用更高的版本。
我尝试将占位符放置在不同的 div 中,并为可放置元素提供。
import React from 'react';
import SalesChart from './SalesChart';
import Tasks from './Tasks';
import LunchFeed from 'widgets/LunchFeed';
import Weather from 'widgets/Weather';
import {Draggable, Droppable, DragDropContext} from "react-beautiful-dnd";
class Dashboard extends React.Component {
constructor(props) {
super(props);
}
onDragEnd(result) {
//TODO
const {destination, source, draggableId} = result;
console.log(result);
if (!destination) {
return;
}
}
render() {
return (
<DragDropContext onDragEnd={this.onDragEnd}>
<Droppable droppableId="drop1">
{(provided, snapshot) => (
<div className="content" ref={provided.innerRef} {...provided.droppableProps}>
<div className="container-fluid">
<div className="row">
<Draggable key={1} draggableId={1} index={1}>
{(provided, snapshot) => (
<div className="col-md-6">
<SalesChart innerRef={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}/>
</div>
)}
</Draggable>
<Draggable key={2} draggableId={2} index={2}>
{(provided, snapshot) => (
<div className="col-md-6">
<Tasks innerRef={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}/>
</div>
)}
</Draggable>
</div>
<div className="row">
<Draggable key={3} draggableId={3} index={3}>
{(provided, snapshot) => (
<div className="col-md-6">
<LunchFeed innerRef={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}/>
</div>
)}
</Draggable>
<Draggable key={4} draggableId={4} index={4}>
{(provided, snapshot) => (
<div className="col-md-6">
<Weather innerRef={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}/>
</div>
)}
</Draggable>
</div>
</div>
{provided.placeholder}
</div>
)}
</Droppable>
</DragDropContext>
)
}
}
export default Dashboard;
当我拖动一个元素时,我收到以下警告: Droppable setup issue [droppableId: "drop1"]:DroppableProvided > placeholder could not be found. Please be sure to add the {provided.placeholder} React Node 作为 Droppable 的子级.更多信息:https ://github.com/atlassian/react-beautiful-dnd/blob/master/docs/api/droppable.md 这是仅用于开发的消息。它将在生产版本中删除。