React | Beautiful DnD のドラッグ方法について

React で要素をドラッグする場合のサンプルプログラムとしては、
こちらの記事が、とてもわかりやすくまとまっています。

参考サイト
sample1.js
Dialog.js
sample.css
react-beautiful-dnd

参考サイト

しかしながら、最新のReactの記述ではないため、多少の修正が必要となります。

修正ポイントを抜粋いたしました。

sample1.js

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

import Dialog from './Dialog'
import './sample.css'

function Sample() {

  const [showDialog, setShowDialog] = useState(false);

  const _showDialog = () => {
    setShowDialog(!showDialog);
  }

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

export default Sample;

if (document.getElementById('sample')) {
    ReactDOM.render(<Sample />, document.getElementById('sample'));
}

import React, { useState } from 'react';

import ReactDOM from 'react-dom';

import Dialog from './Dialog'

import './sample.css'

function Sample() {

const [showDialog, setShowDialog] = useState(false);

const _showDialog = () => {

setShowDialog(!showDialog);

}

return (

<div className='Title'>Example Dialog Popper</div>

<div className='button' onClick={_showDialog.bind(this)}> Show Dialog </div>

</div>

);

}

export default Sample;

if (document.getElementById('sample')) {

ReactDOM.render(<Sample />, document.getElementById('sample'));

}

Dialog.js

import React, { useState } from 'react';

import './sample.css'

function Dialog(props) {

  const [state, setState] = useState({
    diffX: 0,
    diffY: 0,
    dragging: false,
    styles: {}
  });

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

  const _dragging = (e) => {
      if(state.dragging) {
          var left = e.screenX - state.diffX;
          var top = e.screenY - state.diffY;
          setState({
              ...state,
              styles: {
                  left: left,
                  top: top
              }
          });
      }
  }

  const _dragEnd = () =>  {
      setState({
          ...state,
          dragging: false
      });
  }

  var classes = props.show ? 'Dialog' : 'Dialog hidden';

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

export default Dialog;

import React, { useState } from 'react';

import './sample.css'

function Dialog(props) {

const [state, setState] = useState({

diffX: 0,

diffY: 0,

dragging: false,

styles: {}

});

const _dragStart = (e) => {

setState(

{

...state,

diffX: e.screenX - e.currentTarget.getBoundingClientRect().left,

diffY: e.screenY - e.currentTarget.getBoundingClientRect().top,

dragging: true

});

}

const _dragging = (e) => {

if(state.dragging) {

var left = e.screenX - state.diffX;

var top = e.screenY - state.diffY;

setState({

...state,

styles: {

left: left,

top: top

}

});

}

const _dragEnd = () => {

setState({

...state,

dragging: false

});

}

var classes = props.show ? 'Dialog' : 'Dialog hidden';

return(

<div className='DialogTitle'>My Dialog</div>

Contents of the Dialog:

- one

- two

- three

</div>

</div>

);

}

export default Dialog;

sample.css

.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: 80%;
}

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

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

.hidden {
    display: none;
}

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

.Contents {
    padding-top: 10px;
    padding-bottom: 10px;
}

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