Reactで実装するドラッグ&ドロップリスト

FRONT END

みなさんこんにちは!
lismotechの大石です。
今回のブログでは、基本的なリストを作成し、リスト項目をドラッグ&ドロップで並び替える機能を実装します。

 

初期データの設定、状態管理

リストアイテムの配列を作成します。

const listItems = [ 
{ id: '1', label: 'リスト1' }, 
{ id: '2', label: 'リスト2' }, 
{ id: '3', label: 'リスト3' } 
];

次にuseStateを使用して、リストアイテムとドラッグされているリストIDを管理します。

const [items, setItems] = useState(listItems);
const [dragItemId, setDragItemId] = useState(null);

ドラッグ開始時とドロップした時の処理

ドラッグ開始時にドラッグされているアイテムのIDをstateに保存します。

const handleDragStart = (itemId) => { 
 setDragItemId(itemId); 
};

ドロップ時の処理では重なった時にドラッグされたリストを一時的に削除し、ドラッグされたリストを新しい位置に挿入します。
そして挿入した配列をstateに保存します。
こうすることでドラッグ&ドロップで重なった時に配列が更新されリストの位置が変わるようになります。

完成コード


import { useState } from 'react';
import './App.css';

// 各リストアイテムに一意のIDを割り当てる
const listItems = [
{ id: '1', label: 'リスト1' },
{ id: '2', label: 'リスト2' },
{ id: '3', label: 'リスト3' }
];

const App = () => {
 const [items, setItems] = useState(listItems);
 const [dragItemId, setDragItemId] = useState(null);

 // ドラッグ開始時に呼び出し、ドラッグ項目をstateに保存
 const handleDragStart = (itemId) => {
 setDragItemId(itemId);
 };

 // 重なった時に配列を更新
 const handleDragOver = (event, targetItemId) => {
 // イベントのデフォルトの動作をキャンセル
 event.preventDefault();
 if (dragItemId === targetItemId) {
 return;
 }
 
 // ドラッグされたアイテムのインデックスを見つける
 const dragItemIndex = items.findIndex(item => item.id === dragItemId);
 // ドロップされる位置のアイテムのインデックスを見つける
 const targetItemIndex = items.findIndex(item => item.id === targetItemId);

 const newItems = Array.from(items);
 // ドラッグされたアイテムを一時的に削除
 const [draggedItem] = newItems.splice(dragItemIndex, 1);
 // ドラッグされたアイテムを新しい位置に挿入
 newItems.splice(targetItemIndex, 0, draggedItem);

 setItems(newItems);
 };

 return (
  <ul style={{ listStyle: "none" }}>
   {items.map((item) => (
   <li key={item.id} onDragOver={(event) => handleDragOver(event, item.id)}>
    <span
    style={{ cursor: 'grab', marginRight: '10px' }}
    draggable
    onDragStart={() => handleDragStart(item.id)}
    >
     ☰
    </span>
    {item.label}
   </li>
   ))}
  </ul>
 );
};

export default App;

終わりに

この方法を使用することで、Reactで簡単にドラッグアンドドロップ機能を持つリストを作成できます。
実際に手を動かしながら学ぶことでより深く理解できるので作ってみて下さい。
また次回のブログでお会いしましょう。


NEXTGATE LiSMOtechでは中小企業を中心にブランディング・WEBマーケティングを活用したWEB戦略を提供しています。

企業課題・問題に関するご相談、WEBサイト制作やグラフィックデザイン制作のクリエイティブに関するご相談やご質問、お見積りなどお気軽にお問い合わせください。

お得な情報がLINEに届く!!

LINE公式アカウントはこちらから。

友だち追加

最新記事

CONTACT

NEXTGATE LiSMOtechでは中小企業を中心にブランディング・WEBマーケティングを活用したWEB戦略を提供しています。
企業課題・問題に関するご相談、WEBサイト制作やグラフィックデザイン制作のクリエイティブに関するご相談やご質問、お見積りなどお気軽にお問い合わせください。

平日10:00〜19:00

お電話の場合こちらから

043-305-4162

平日10:00〜19:00