React.jsでドラッグ＆ドロップを実現する方法

この記事では、React.jsを使ってドラッグ＆ドロップ機能を簡単に実装する方法を紹介します。HTML5のドラッグ＆ドロップAPIを使用し、さらにReact DnDライブラリを活用して高度なインタラクティブUIを作成する手法を解説します。

ドラッグ＆ドロップとは？その基本的な概念

ドラッグ＆ドロップは、要素を画面上でドラッグして別の場所にドロップする操作を指します。これにより、UIがよりインタラクティブで直感的になります。

  
  // 基本的なドラッグ＆ドロップの例
  function DraggableItem() {
    const handleDragStart = (event) => {
      event.dataTransfer.setData('text', event.target.id);
    };

    const handleDrop = (event) => {
      event.preventDefault();
      const data = event.dataTransfer.getData('text');
      event.target.appendChild(document.getElementById(data));
    };

    const handleDragOver = (event) => {
      event.preventDefault();
    };

    return (
      

        

          Drag me
        
        

          Drop here
        
      
    );
  }
  

React.jsでドラッグ＆ドロップを実現する基本的な方法

React.jsでは、HTML5のドラッグ＆ドロップAPIを活用して、要素をドラッグ可能にし、別の要素にドロップすることができます。以下は、シンプルなドラッグ＆ドロップの実装例です。

  
  function DraggableList() {
    const [items, setItems] = useState(['Item 1', 'Item 2', 'Item 3']);

    const handleDragStart = (event, index) => {
      event.dataTransfer.setData('itemIndex', index);
    };

    const handleDrop = (event) => {
      const draggedIndex = event.dataTransfer.getData('itemIndex');
      const targetIndex = event.target.dataset.index;
      const updatedItems = [...items];
      const [movedItem] = updatedItems.splice(draggedIndex, 1);
      updatedItems.splice(targetIndex, 0, movedItem);
      setItems(updatedItems);
    };

    return (
      

        {items.map((item, index) => (
          
 handleDragStart(e, index)}
            onDrop={handleDrop}
          >
            {item}
          
        ))}
      
    );
  }
  

React DnDを使用して高度なドラッグ＆ドロップ機能を実装する

React DnDライブラリを使用すると、より高度なドラッグ＆ドロップ機能を簡単に実装できます。これは、複雑なドラッグ＆ドロップのシナリオに対応し、カスタマイズ可能なUIを提供します。

  
  import { DndProvider, useDrag, useDrop } from 'react-dnd';
  import { HTML5Backend } from 'react-dnd-html5-backend';

  function DraggableItem({ id, text }) {
    const [, ref] = useDrag(() => ({
      type: 'ITEM',
      item: { id },
    }));

    return (
      

        {text}
      
    );
  }

  function DroppableArea() {
    const [, ref] = useDrop(() => ({
      accept: 'ITEM',
      drop: (item) => console.log(`Dropped item: ${item.id}`),
    }));

    return 
Drop here
;
  }

  function App() {
    return (
      
        
        
        
      
    );
  }
  

React.jsでドラッグ＆ドロップを実現する方法のまとめ

この記事では、React.jsでドラッグ＆ドロップ機能を実現する方法を学びました。基本的なHTML5のドラッグ＆ドロップAPIを使用したシンプルな実装から、React DnDを使った高度なドラッグ＆ドロップ機能まで、幅広いシナリオで活用できる方法を解説しました。