React 컴포넌트/Div를 드래그 가능하게 만들기

import React, { Component } from 'react';
import './MainApp.css';
import Dialog from '../Components/Dialog';


export default class MainApp extends Component {
    constructor(props) {
        super(props);

        this.state = {
            showDialog: false
        }
    }

    _showDialog() {
        this.setState({showDialog: !this.state.showDialog});
    }

    render() {

        return (
            <div className='MainApp'>
                <div className='Title'>Example Dialog Popper</div>
                <div className='button' onClick={this._showDialog.bind(this)}> Show Dialog </div>
                <Dialog onClose={this._showDialog.bind(this)} show={this.state.showDialog}/>
            </div>
        );
    }
}

.Title {
    font-weight: bold;
    font-size: 16px;
    padding-top: 30px;
}

.button {
    font-size: 12px;
    width: 100px;
    color: black;
    border: 2px solid black;
    border-radius: 30px;
    padding: 10px;
    margin: 10px;
    margin-left: 650px;
}

.MainApp {
    background-color: lightsalmon;
    height: 1000px;
}

import React, { Component } from 'react';
import './Dialog.css';

export default class Dialog extends Component {
    constructor(props) {
        super(props);

        this.state = {
            diffX: 0,
            diffY: 0,
            dragging: false,
            styles: {}
        }

        this._dragStart = this._dragStart.bind(this);
        this._dragging = this._dragging.bind(this);
        this._dragEnd = this._dragEnd.bind(this);
    }

    _dragStart(e) {
        this.setState({
            diffX: e.screenX - e.currentTarget.getBoundingClientRect().left,
            diffY: e.screenY - e.currentTarget.getBoundingClientRect().top,
            dragging: true
        });
    }

    _dragging(e) {

        if(this.state.dragging) {
            var left = e.screenX - this.state.diffX;
            var top = e.screenY - this.state.diffY;

            this.setState({
                styles: {
                    left: left,
                    top: top
                }
            });
        }
    }

    _dragEnd() {
        this.setState({
            dragging: false
        });
    }

    render() {
        var classes = this.props.show ? 'Dialog' : 'Dialog hidden';
        return (
            <div className={classes} style={this.state.styles} onMouseDown={this._dragStart} onMouseMove={this._dragging} onMouseUp={this._dragEnd}>
                <div className='DialogTitle'>My Dialog</div>
                <div className='Contents'>
                    Contents of the Dialog:
                        - one
                        - two
                        - three
                </div>
                <div className='closeButton' onClick={this.props.onClose}>
                    Close
                </div>
            </div>
        );
    }
}

.Dialog {
    width: 400px;
    height: 400px;
    background-color: lightblue;
    border-radius: 10px;
    border: 3px solid grey;
    position: absolute;
    cursor: move;
    top: 150px;
    left: 520px;
}

.hidden {
    display: none;
}

.DialogTitle {
    font-weight: bold;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 3px solid grey;
}

.Contents {
    padding-top: 50px;
    padding-bottom: 200px;
}

.closeButton {
    font-size: 12px;
    width: 100px;
    color: black;
    border: 2px solid black;
    border-radius: 25px;
    padding: 10px;
    margin: 10px;
    margin-left: 140px;
    cursor: pointer;
}

import React from 'react';
import './App.css';
import MainApp from './Main/MainApp.js';

function App() {
  return (
    <div className="App">
      <MainApp />
    </div>
  );
}

export default App;

import logo from './logo.svg';
import './App.css';
import Draggable from "react-draggable";

function App() {
  return (
    <Draggable>
      <img
      src="https://images.pexels.com/photos/20787/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350"
      alt="new"
      />
    </Draggable>
  );
}

export default App;

import React, { useState } from 'react';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
import './App.css';

const finalSpaceCharacters = [
  {
    id: 'james',
    name: 'James',
  },
  {
    id: 'john',
    name: 'John',
  },
  {
    id: 'israel',
    name: 'Israel',
  },
  {
    id: 'joker',
    name: 'Joker',
  },
  {
    id: 'quinn',
    name: 'Quinn',
  }
]

function App() {
  const [characters, updateCharacters] = useState(finalSpaceCharacters);

  function handleOnDragEnd(result) {
    if (!result.destination) return;

    const items = Array.from(characters);
    const [reorderedItem] = items.splice(result.source.index, 1);
    items.splice(result.destination.index, 0, reorderedItem);

    updateCharacters(items);
  }

  return (
    <div className="App">
      <header className="App-header">
        <h1>Final Space Characters</h1>
        <DragDropContext onDragEnd={handleOnDragEnd}>
          <Droppable droppableId="characters">
            {(provided) => (
              <ul className="characters" {...provided.droppableProps} ref={provided.innerRef}>
                {characters.map(({ id, name }, index) => {
                  return (
                    <Draggable key={id} draggableId={id} index={index}>
                      {(provided) => (
                        <li ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>

                          <p>
                            {name}
                          </p>
                        </li>
                      )}
                    </Draggable>
                  );
                })}
                {provided.placeholder}
              </ul>
            )}
          </Droppable>
        </DragDropContext>
      </header>
    </div>
  );
}

export default App;