[React] react-beautiful-dnd 라이브러리 사용법

1. DndTest

import * as React from "react";
import { DragDropContext, Droppable } from "react-beautiful-dnd";
import * as mobx from "mobx";
import { observer } from "mobx-react";
import DraggableInternal from "./DraggableInternal";
import "./App.css";
import Button from "../../components/common/Button";
import { Fragment } from "react";

@observer
class DndTest extends React.Component {
    @mobx.observable
    items = {
        dropPointA: [
            { id: "1", content: "abcd" },
            { id: "2", content: "123" },
            { id: "3", content: "abcd123" }
        ],
        dropPointB: []
    }

    @mobx.action
    addItems = () => {

        let id = this.items.dropPointA.length + 1;
        let obj = {
            id: id,
            content: 'test' + id
        };
        /* this.items.dropPointA.push({
            id: id,
            content: 'test' + id
        }); */

        this.items.dropPointA.splice(1, 0, obj);
    }

    onDragEnd = result => {
        if (!result.destination) {
            // dropped outside the list
            return
        }

        console.log('result', result);

        const startIndex = result.source.index
        const endIndex = result.destination.index
        const sourceArray = this.items[result.source.droppableId]
        const destinationArray = this.items[result.destination.droppableId]
        const [removed] = sourceArray.splice(startIndex, 1)

        if (result.source.droppableId == result.destination.droppableId) {
            sourceArray.splice(endIndex, 0, removed)
            this.items[result.destination.droppableId] = sourceArray
        } else {
            destinationArray.splice(endIndex, 0, removed)
            this.items[result.source.droppableId] = sourceArray
            this.items[result.destination.droppableId] = destinationArray
        }
    }

    render() {

        console.log('this.items.dropPointA', mobx.toJS(this.items.dropPointA))

        return (

            <Fragment>
                <DragDropContext onDragEnd={this.onDragEnd}>
                    <Droppable droppableId="dropPointA" direction="horizontal">
                        {(provided, snapshot) => (
                            <DraggableInternal
                                items={this.items.dropPointA}
                                provided={provided}
                                snapshot={snapshot}
                            />
                        )}
                    </Droppable>

                    {/* <Droppable droppableId="dropPointB">
          {(provided, snapshot) => (
            <DraggableInternal
              items={this.items.dropPointB}
              provided={provided}
              snapshot={snapshot}
            />
          )}
        </Droppable> */}
                </DragDropContext>

                <Button title="add" onClick={() => {
                    this.addItems();
                }} />
            </Fragment>
        )
    }
}

export default DndTest;

 

2. DraggableInternal

import * as React from "react"
import { Draggable } from "react-beautiful-dnd"
import { observer } from "mobx-react"

@observer
class DraggableInternal extends React.Component {
    draggingDropPointCss(isDraggingOver) {
        return {
            background: isDraggingOver ? "lightblue" : "lightgrey"
        }
    }

    draggingItemCss(isDragging, draggableStyle) {
        return {
            background: isDragging ? "lightgreen" : "grey",
            ...draggableStyle
        }
    }

    render() {
        const { provided, snapshot, items } = this.props
        return (
            <div
                ref={provided.innerRef}
                className="drop-point"
                style={this.draggingDropPointCss(snapshot.isDraggingOver)}
            >
                {items.map((item, index) => (
                    <Draggable key={item.id} draggableId={`${item.id}`} index={index}>
                        {(provided, snapshot) => (
                            <div>
                                <div
                                    ref={provided.innerRef}
                                    {...provided.draggableProps}
                                    {...provided.dragHandleProps}
                                    className="item"
                                    style={this.draggingItemCss(
                                        snapshot.isDragging,
                                        provided.draggableProps.style
                                    )}
                                >
                                    {item.content}
                                </div>
                                {provided.placeholder}
                            </div>
                        )}
                    </Draggable>
                ))}
                {provided.placeholder}
            </div>
        )
    }
}

export default DraggableInternal;

 

3. App.css

.droppable {
    height: 100px;
    background-color: lightblue;
    padding: 10px;
    margin-bottom: 50px;
}

.item {
    user-select: none;
    padding: 10px;
    margin-right: 10px;
}

.drop-point {
    display: flex;
    padding: 10px;
    height: 100px;
    margin-bottom: 50px;
    overflow: auto;
}

 

 

출처: https://github.com/github0013/react-beautiful-dnd-mobx/tree/master/src