react-draggableは、要素をドラッグして自由に移動させることができます。シンプルなAPIで、ドラッグの開始、移動、終了を簡単に管理できます。

react-resizableは、ドラッグによる移動機能はありません。リサイズに特化しているため、ドラッグによる移動はサポートしていません。

react-grid-layoutは、グリッド内で要素をドラッグ＆ドロップできます。グリッドの制約に従って要素を移動させるため、整然としたレイアウトが維持されます。

react-draggableは、リサイズ機能を提供していません。要素のサイズを変更することはできず、ドラッグによる移動のみが可能です。

react-resizableは、リサイズ機能に特化したライブラリです。要素のサイズを変更するためのハンドルを提供し、リサイズ操作を簡単に実装できます。

react-grid-layoutは、要素のリサイズもサポートしています。グリッド内で要素のサイズを変更できるため、より柔軟なレイアウトが可能です。

react-draggableは、グリッドレイアウトをサポートしていません。自由な位置に要素をドラッグできるため、グリッドの制約はありません。

react-resizableは、グリッドレイアウトを提供していません。リサイズ機能に特化しているため、レイアウトの制約はありません。

react-grid-layoutは、グリッドレイアウトを提供します。要素はグリッドに配置され、ドラッグ＆ドロップやリサイズがグリッドの制約に従って行われます。

react-draggableは、ドラッグ可能な要素のカスタマイズが容易です。スタイルや動作を簡単に変更できますが、リサイズやグリッドに関するカスタマイズはありません。

react-resizableは、リサイズハンドルや要素のサイズ変更に関するカスタマイズが可能です。リサイズに特化しているため、ドラッグやグリッドに関するカスタマイズは限られています。

react-grid-layoutは、グリッドのサイズ、配置、リサイズの制約など、さまざまな要素をカスタマイズできます。最も柔軟性が高く、複雑なレイアウトにも対応可能です。

react-draggableを使用したドラッグ可能な要素の例

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

function DraggableComponent() {
  return (
    <Draggable>
      <div style={{ width: '100px', height: '100px', background: 'lightblue', border: '1px solid blue' }}>
        ドラッグして移動
      </div>
    </Draggable>
  );
}

export default DraggableComponent;

react-resizableを使用したリサイズ可能な要素の例

import React from 'react';
import { ResizableBox } from 'react-resizable';
import 'react-resizable/css/styles.css';

function ResizableComponent() {
  return (
    <ResizableBox width={200} height={200} minConstraints={[100, 100]} maxConstraints={[300, 300]}>
      <div style={{ width: '100%', height: '100%', background: 'lightblue', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        リサイズしてみてください
      </div>
    </ResizableBox>
  );
}

export default ResizableComponent;

react-grid-layoutを使用したグリッド内でのドラッグ＆ドロップとリサイズの例

import React from 'react';
import { WidthProvider, Responsive } from 'react-grid-layout';
const ResponsiveGridLayout = WidthProvider(Responsive);

function GridLayout() {
  const layout = [
    { i: 'a', x: 0, y: 0, w: 1, h: 2 },
    { i: 'b', x: 1, y: 0, w: 1, h: 2 },
    { i: 'c', x: 0, y: 2, w: 2, h: 1 },
  ];

  return (
    <ResponsiveGridLayout layout={layout} cols={{ lg: 2, md: 2, sm: 1, xs: 1, xxs: 1 }} rowHeight={30}>
      <div key="a" style={{ background: 'lightcoral' }}>要素A</div>
      <div key="b" style={{ background: 'lightgreen' }}>要素B</div>
      <div key="c" style={{ background: 'lightblue' }}>要素C</div>
    </ResponsiveGridLayout>
  );
}

export default GridLayout;