小编Mih*_*rie的帖子

我尝试使用“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}> …