react-draggableで要素のドラッグする

やりたいこと

  • react-draggableを使う

github.com

npm install

npm install react-draggable

最小設定で試す

<Draggable>タグで囲むことによって、
囲まれた要素がドラッグ可能になります。

import React from 'react';
import Draggable from 'react-draggable';

const Component = () => {
  return (
    <>
      <Draggable>
        <div>
          ドラッグ可能
        </div>
      </Draggable>
    </>
  );
};

export default Component;

よく使いそうな<Draggable>のプロパティ

import React from 'react';
import Draggable from 'react-draggable';

const Component = () => {
  const onStart = (e, data) => {
    console.log('onStart!');
    console.log(e);
    console.log(data);
  };

  const onDrag = (e, data) => {
    console.log('onDrag!');
    console.log(e);
    console.log(data);
  };

  const onStop = (e, data) => {
    console.log('onStop!');
    console.log(e);
    console.log(data);
  };

  return (
    <>
      <Draggable position={{ x: 500, y: 500 }}>
        <div className="draggable-window">
          Draggable要素(初期位置で固定)
        </div>
      </Draggable>
      <Draggable positionOffset={{ x: 700, y: 700 }}>
        <div className="draggable-window">
          Draggable要素(初期位置を指定。ドラッグ可能)
        </div>
      </Draggable>
      <Draggable onStart={onStart} onDrag={onDrag} onStop={onStop}>
        <div className="draggable-window">
          イベントハンドリング
        </div>
      </Draggable>
    </>
  );
};

export default Component;

  • onStart ドラッグ開始時にイベントを実行（ドラッグ開始時に一度だけ実行）

  • onDrag ドラッグ中にイベントを実行（ドラッグ中は連続で実行され続ける）

  • onStop ドラッグ終了時にイベントを実行（ドラッグ終了時に一度だけ実行）

  • position初期位置（固定）

  • positionOffset 初期位置（変動）

動作イメージ Image from Gyazo