React DnD Test

by seo gyeongseok

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>

    
<div id='root'></div>

CSS

body {
            background-color: #e9e9e9;
        }

        #root {
            width: 80%;
            margin: 0px auto;
            text-align: center
        }

        .itemContainer1,
        .itemContainer2 {
            width: 500px;
            height: 200px;
            border: 1px solid blue;
        }

        .item {
            display: block;
            color: blueviolet;
            border: 1px solid grey;
        }

Babel + JSX

class DnDTest extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            container1Item: [this.createItem1()],
            container2Item: [this.createItem2()]
        }
    }

    createItem1() {
        return (
            <span
                key='1'
                className='item'
                draggable
                onDragStart={(evt) => {
                    console.log('on drag start');
                    evt.dataTransfer.setData('text', 'Drag Item 1');
                }}
            >
                Drag Item 1
            </span>
        );
    }

    createItem2() {
        return (
            <span
                key='2'
                className='item'
                draggable
                onDragStart={(evt) => {
                    console.log('on drag start');
                    evt.dataTransfer.setData('text', 'Drag Item 2');
                }}
            >
                Drag Item 2
            </span>
        );
    }

    createDropHereMessage() {
        return (
            <span>Drop In Here</span>
        );
    }

    createContents() {
        const container1Items = this.state.container1Item;
        const container2Items = this.state.container2Item;

        return (
            <div>
                <div
                    className='itemContainer1'
                    onDragOver={(evt) => {
                        evt.preventDefault();
                        console.log('drag over');
                    }}

                    onDrop={(evt) => {
                        console.log('on drop');
                        const data = evt.dataTransfer.getData('text');
                        console.log(data);

                        let container1Item = _.concat(this.state.container1Item);
                        let newItem;
                        if (data === 'Drag Item 1') {
                            newItem = this.createItem1();
                           ...