React, Tailwind CSS 및 Dnd-kit을 사용하여 항목 정렬/정렬을 위한 드래그 앤 드롭 구현-JS 튜토리얼-php.cn

Implementing Drag and Drop to Arrange/Sort Items with React, Tailwind CSS, and Dnd-kit

소개

Trello 또는 Asana와 같은 애플리케이션이 직관적인 드래그 앤 드롭 인터페이스를 어떻게 관리하는지 궁금한 적이 있습니까? 사용자가 항목을 쉽게 정렬해야 하는 애플리케이션이 있다고 상상해 보십시오. 원활한 드래그 앤 드롭 기능이 없으면 이 작업이 지루하고 좌절스러울 수 있습니다. 이 블로그 게시물에서는 React, Tailwind CSS 및 Dnd-kit을 사용하여 동적 드래그 앤 드롭 기능을 구현하여 항목 정렬 및 정렬을 위한 원활한 사용자 환경을 만드는 방법을 살펴보겠습니다.

실제 문제

실제 애플리케이션에서는 사용자가 우선순위, 상태 또는 기타 기준에 따라 항목을 다시 정렬해야 하는 경우가 많습니다. 예를 들어, 사용자는 브레인스토밍 세션 중에 아이디어를 빠르게 재정렬해야 할 수 있습니다. 효율적인 드래그 앤 드롭 기능이 없으면 이 프로세스에는 항목 위치를 수동으로 편집하거나 비효율적인 위로 이동/아래로 이동 버튼을 사용하는 등의 번거로운 단계가 포함될 수 있습니다. 우리의 목표는 이 프로세스를 단순화하여 사용자에게 더욱 직관적이고 효율적으로 만드는 솔루션을 제공하는 것입니다.

사용 사례

사용자가 자신의 아이디어를 정리할 수 있는 브레인스토밍 도구의 사용 사례를 고려해 보겠습니다. 사용자에게는 다음과 같은 능력이 필요합니다.

목록에 새로운 아이디어를 추가하세요.
아이디어를 원하는 순서로 드래그 앤 드롭하여 정렬하고 우선순위를 지정하세요.
다른 카테고리 간에 아이디어를 이동합니다(예: 새로운 아이디어와 기존 아이디어).

이를 달성하기 위해 우리는 프로젝트 설정을 위한 Vite, 스타일링을 위한 Tailwind CSS, 드래그 앤 드롭 기능을 위한 Dnd-kit를 사용하여 React 애플리케이션을 구축할 것입니다. 이 설정을 통해 생산성과 사용자 경험을 향상시키는 사용자 친화적인 인터페이스를 만들 수 있습니다.

프로젝트 설정

Vite 프로젝트 초기화

npm create vite@latest my-drag-drop-app --template 반응
CD 내 드래그 드롭 앱
npm 설치

필수 종속성 설치:

npm install tailwindcss dnd-kit 반응-핫-토스트 반응 아이콘

Tailwind CSS 구성:

npx tailwindcss 초기화

tailwind.config.js 업데이트:

module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  ],
  plugins: [],
}

로그인 후 복사

index.css에 Tailwind 지시문을 추가합니다.

@tailwind base;
@tailwind components;
@tailwind utilities;

로그인 후 복사

드래그 앤 드롭 구현

App.jsx

App.jsx 파일은 애플리케이션의 전체 레이아웃을 설정하고 전역 상태를 관리하는 주요 구성 요소입니다.

요약

애플리케이션 전반의 상태를 관리하는 주요 컴포넌트입니다.
useState를 활용하여 프로젝트 데이터 및 업데이트를 처리합니다.
UI 및 기능을 위해 Header 및 DragDropArrange 구성 요소를 통합합니다.
알림을 위해 React-hot-toast의 토스터가 포함되어 있습니다.

주요 기능:

상태 관리: 프로젝트 데이터의 상태를 관리합니다.
새 데이터 처리: 프로젝트 데이터 상태에 새 데이터를 추가하는 기능입니다.
레이아웃: 헤더, 메인 콘텐츠, 알림 등의 레이아웃을 설정합니다.

import React, { useState } from 'react';
import { Toaster } from 'react-hot-toast';
import Header from './screens/Navigation/Header';
import DragDropArrange from './screens/DDA/DragDropArrange';
import projectDataJson from "./Data/data.json"

function App() {

  const [projectData, setProjectData] = useState(projectDataJson)
  function handleNewData(data){
    const tempData = projectData.newIdea;
    const maxNumber = (Math.random() * 100) * 1000;
    tempData.push({_id: maxNumber, idea: data});
    setProjectData({...data, newIdea: tempData})
  }

  return (
    <div className="h-auto overflow-auto">
      <div className='w-full h-auto overflow-auto fixed z-50'>
      <Header handleNewData={handleNewData}/>
      </div>
      <div className="h-auto overflow-auto my-16 flex items-center justify-center">
        <DragDropArrange projectData={projectData}/>
      </div>
      <Toaster
        toastOptions={{
          className: 'text-xs',
          duration: 3000,
        }}
      />
    </div>
  );
}

export default App;

로그인 후 복사

헤더.jsx

Header.jsx 파일은 새 항목을 추가하기 위한 양식을 여는 버튼을 제공하는 탐색 모음 역할을 합니다.

요약:

탐색 기능과 항목 입력 양식을 여는 버튼이 포함되어 있습니다.
useState를 사용하여 항목 입력 양식 가시성 상태를 관리합니다.
새 항목 추가를 위한 사용자 상호작용을 처리합니다.

주요 기능:

항목 양식 전환: 항목 입력 양식의 표시 여부를 관리합니다.
새 데이터 처리: 새 항목 데이터를 상위 구성 요소에 전달합니다.

import React, { useState } from 'react';
import { PiNotepadFill } from "react-icons/pi";
import AddIdea from '../DDA/AddIdea';

const Header = ({handleNewData}) => {
  const [ideaTabOpen, setIdeaTabOpen] = useState(false)
  return (
    <>
      <nav className='w-full h-auto p-2 float-left overflow-auto bg-black flex items-center justify-center'>
        <div className='w-2/5 mdw-3/5 lg:w-4/5 h-auto px-6'>
            <span className='font-bold text-white text-xl lg:text-2xl flex items-center justify-start'><PiNotepadFill/> DDA</span>
        </div>
        <div className='w-3/5 md:w-2/5 lg:w-1/5 h-auto flex items-center justify-end px-4'>
          <button className='text-sm lg:text-lg font-bold text-white border p-2 rounded-lg hover:bg-white hover:text-black border-white active:bg-gray' onClick={() => setIdeaTabOpen(!ideaTabOpen)}>{ideaTabOpen ? "Cancel" : "New Idea"}</button>
        </div>
      </nav>
      {ideaTabOpen && (
        <div className='float-left overflow-auto relative w-full'>
          <AddIdea handleNewData={handleNewData} setIdeaTabOpen={setIdeaTabOpen}/>
        </div>
      )}
    </>
  )
}

export default Header

로그인 후 복사

AddIdea.jsx

AddIdea.jsx 파일은 유효성 검사 및 제출 기능을 포함하여 새 항목을 추가하기 위한 양식을 제공합니다.

요약:

목록에 새 항목을 추가하는 구성 요소
useState를 사용하여 양식 입력 데이터 및 문자 수를 관리합니다.
입력 길이를 확인하고 상위 구성 요소에 새 데이터를 제출합니다.

주요 기능:

변경 처리: 양식 입력 및 문자 수를 관리합니다.
제출 처리: 양식 데이터를 검증하고 상위 구성 요소에 제출합니다.

import React, { useState } from 'react';
import toast from "react-hot-toast";
import { Helmet } from 'react-helmet';

const AddIdea = ({ handleNewData, setIdeaTabOpen }) => {
    const maxLengths = 100;

    const [formData, setFormData] = useState();

    const [remainingChars, setRemainingChars] = useState(80)

    const handleChange = (e) => {
        if (e.target.value.length > maxLengths) {
            toast.error(`${`Input can't be more than ${maxLengths} characters`}`);
        } else {
            setFormData(e.target.value);
            setRemainingChars(maxLengths - e.target.value.length);
        }
    };

    const handleSubmit = (e) => {
        e.preventDefault();
        if (!formData) {
            toast.error(`You don't have an idea.`);
            return
        }
        handleNewData(formData);
        setIdeaTabOpen(false)
    };

    return (
        <section className='h-screen'>
            <div className='flex items-center justify-center bg-blue rounded-b-xl border-b-[10px] py-8 lg:p-10'>
                <div className='m-1 w-full h-auto flex flex-wrap items-center justify-center'>
                    <div className='sm:w-[90%] w-3/5 h-auto'>
                        <textarea
                            className='w-full h-auto overflow-auto outline-none border p-2 sm:text-sm '
                            placeholder='Items...'
                            name="items"
                            value={formData}
                            maxLength={maxLengths}
                            onChange={handleChange}
                        ></textarea>
                        <p className={` text-xs ${remainingChars < 15 ? "text-red" : "text-white"}`}>{remainingChars} characters remaining</p>
                    </div>
                    <div className='sm:w-4/5 w-1/5 p-2 flex items-center justify-center'>
                        <button className='bg-primary_button text-white px-4 py-1 rounded-md font-bold' onClick={handleSubmit}>Submit</button>
                    </div>
                    <Helmet><title>Drag Drop & Arrange | New Idea</title></Helmet>
                </div>
            </div>
            <div className='w-full h-full fixed backdrop-blur-[1px]' onClick={()=>setIdeaTabOpen(false)}></div>
        </section>

    );
};

export default AddIdea;

로그인 후 복사

DragDropArrange.jsx

DragDropArrange.jsx 파일은 드래그 앤 드롭 기능을 관리하고 사용자 상호 작용에 따라 항목 순서를 업데이트하는 역할을 합니다.

Summary:

Main component for handling drag-and-drop functionality.
Uses DndContext and SortableContext from @dnd-kit/core for drag-and-drop behavior.
Manages state for the data array and updates the order of items based on drag events.
Fetches initial data from projectData and sets it to the state.

Key Functions:

Handle Drag End: Manages the logic for rearranging items based on drag-and-drop actions.
Fetch Data: Fetches initial data and sets it to the component state.

import React, { useState, useEffect } from 'react';
import { DndContext, closestCenter } from '@dnd-kit/core';
import { arrayMove, SortableContext } from '@dnd-kit/sortable';
import { Helmet } from 'react-helmet';
import Arrange from './Arrange';
import Loader from '../Navigation/Loader';

const DragDropArrange = ({projectData}) =>  {
  const [dataArray, setDataArray] = useState({
    newIdea: undefined,
    oldIdea: undefined,
    updateValue: []
  });

  const handleDragEnd = ({ active, over }) => {
    if (!over) return;

    const { fromList, targetId } = active.data.current;
    const { toList, index } = over.data.current;

    if (fromList === toList) {
      const sortedItems = arrayMove(dataArray[toList], dataArray[toList].findIndex((idea) => idea._id === targetId), index);
      setDataArray((prev) => ({ ...prev, [toList]: sortedItems }));
    } else {
      const draggedItem = dataArray[fromList].find((idea) => idea._id === targetId);
      const updatedFromList = dataArray[fromList].filter((idea) => idea._id !== targetId);
      const updatedToList = [...dataArray[toList].slice(0, index), draggedItem, ...dataArray[toList].slice(index)];

      setDataArray((prev) => ({ ...prev, [fromList]: updatedFromList, [toList]: updatedToList }));
    }
  };

  const fetchData = async () => {
    const { newIdea, oldIdea } = projectData;
    setTimeout(() => {
      setDataArray((prev) => ({ ...prev, newIdea, oldIdea }));
    }, 500);
  };

  useEffect(() => {
    fetchData();
  }, []);

  return (
    <section className='w-full h-auto md:w-11/12 lg:w-10/12 py-12 md:p-4 lg:p-12'>
      <div className='w-full h-auto my-2 overflow-auto'>
        <div className='w-full h-auto my-4 overflow-auto'>
          {dataArray.newIdea && dataArray.oldIdea && (
            <DndContext collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
              <SortableContext items={dataArray?.newIdea}>
                <Arrange dataArray={dataArray} />
              </SortableContext>
            </DndContext>
          )}
          {!dataArray.newIdea && !dataArray.oldIdea && (
            <>
            <div className='w-full h-auto flex items-center justify-center'><Loader/></div>
            <div className='w-full text-center text-xl font-bold'>
              <span className='text-gradient'>Loading...</span>
            </div>
            </>
          )}
        </div>
      </div>
      <Helmet><title>Drag Drop & Arrange | Home</title></Helmet>
    </section>
  );
};

export default DragDropArrange

로그인 후 복사

Arrange.jsx

The Arrange.jsx file handles the arrangement of new and old ideas, displaying them in sortable contexts.

Summary:

Manages the arrangement of new and old ideas.
Uses SortableContext for sortable behavior.
Displays items and manages their order within each category.

Key Functions:

Display Items: Renders items in their respective categories.
Handle Sorting: Manages the sortable behavior of items.

import React from 'react';
import { SortableContext } from '@dnd-kit/sortable';
import Drag from "./Drag";
import Drop from "./Drop";
import Lottie from 'react-lottie';
import NoData from '../../Lottie/NoData.json';

const Arrange = ({ dataArray }) => {
  const { newIdea, oldIdea } = dataArray;

  const defaultOptions = {
    loop: true,
    autoplay: true,
    animationData: NoData,
    rendererSettings: {
      preserveAspectRatio: "xMidYMid slice"
    }
  };

  return (
    <section className='w-full h-auto rounded-md overflow-auto'>
      <div className='h-auto overflow-auto flex flex-wrap items-start justify-around'>

        <div className='w-[48%] min-h-80 h-auto border border-blue shadow-md shadow-white-input-light rounded-md'>
          <h2 className='bg-blue text-white text-xl text-center font-extrabold py-2'>New Idea</h2>
          <SortableContext items={newIdea.map(item => item._id)}>
            {newIdea.length > 0 && (
              <>
                {newIdea?.map((data) => (
                  <React.Fragment key={data._id}>
                    <Drag data={data} listType="newIdea"/>
                  </React.Fragment>
                ))}
                <Drop index={newIdea.length} listType="newIdea" />
              </>
            )}
            {newIdea.length < 1 && (
              <>
                <div className='w-full h-52 flex items-center justify-center'>
                  <Lottie
                    options={defaultOptions}
                    height={150}
                    width={150}
                  />
                </div>
                <Drop index={newIdea.length} listType="newIdea" />
              </>
            )}
          </SortableContext>
        </div>

        <div className='w-[48%] min-h-80 h-auto border border-blue shadow-md shadow-white-input-light rounded-md'>
          <h2 className='bg-blue text-white text-xl text-center font-extrabold py-2'>Old Idea</h2>
          <SortableContext items={oldIdea.map(item => item._id)}>
            {oldIdea.length > 0 && (
              <>
                {oldIdea?.map((data) => (
                  <React.Fragment key={data._id}>
                    <Drag data={data} listType="oldIdea" />
                  </React.Fragment>
                ))}
                <Drop index={oldIdea.length} listType="oldIdea" />
              </>
            )}
            {oldIdea.length < 1 && (
              <>
                <div className='w-full h-52 flex items-center justify-center'>
                  <Lottie
                    options={defaultOptions}
                    height={150}
                    width={150}
                  />
                </div>
                <Drop index={oldIdea.length} listType="oldIdea" />
              </>
            )}
          </SortableContext>
        </div>

      </div>
    </section>
  );
}

export default Arrange

로그인 후 복사

Drag.jsx

The Drag.jsx file manages the draggable items, defining their behavior and style during the drag operation.

Summary:

Manages the behavior and style of draggable items.
Uses useDraggable from @dnd-kit/core for draggable behavior.
Defines the drag and drop interaction for items.

Key Functions:

useDraggable: Provides drag-and-drop functionality.
Style Management: Updates the style based on drag state.

import React from 'react';
import { useDraggable } from '@dnd-kit/core';
import { IoMdMove } from "react-icons/io";

const Drag = ({ data, listType }) => {

    const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({
        id: data._id,
        data: { fromList: listType, targetId: data._id },
    });

    const style = {
        transform: transform ? `translate3d(${transform.x}px, ${transform.y}px, 0)` : undefined,
        opacity: isDragging ? 0.5 : 1,
        pointerEvents: isDragging ? 'none' : 'auto',
    };

    return (
        <>
            <section
                className="w-auto h-auto bg-yellow rounded-md border overflow-hidden m-2"
                ref={setNodeRef}
                style={style}
                {...listeners}
                {...attributes}
            >
                <div>
                    <div className="w-auto p-2 h-auto bg-yellow">
                        <p className="h-auto text-xs lg:text-sm text-black break-all">{data?.idea}</p>
                    </div>
                </div>
            </section>
        </>
    );
};

export default Drag;

로그인 후 복사

Drop.jsx

The Drop.jsx file defines the droppable areas where items can be dropped, including visual feedback during the drag operation.

Summary:

Manages the behavior of droppable areas.
Uses useDroppable from @dnd-kit/core for droppable behavior.
Provides visual feedback during drag-and-drop interactions.

Key Functions:

useDroppable: Provides droppable functionality.
Handle Drop: Manages drop actions and updates the state accordingly.

import React from 'react';
import { useDroppable } from '@dnd-kit/core';

const Drop= ({ index, setDragged, listType }) => {
    const { isOver, setNodeRef } = useDroppable({
        id: `${listType}-${index}`,
        data: { toList: listType, index },
    });

    const handleDrop = (e) => {
        e.preventDefault();
        setDragged({ toList: listType, index });
    };

    return (
        <section
            ref={setNodeRef}
            onDrop={handleDrop}
            onDragOver={(e) => e.preventDefault()}
            className={`w-auto h-16 rounded-lg flex items-center justify-center text-xs text-secondary_shadow ${isOver ? ` opacity-100` : `opacity-0`}`}
            style={{ pointerEvents: 'none' }}
        >
        </section>
    );
};

export default Drop

로그인 후 복사

Conclusion

By following this comprehensive guide, you can create a dynamic and user-friendly drag-and-drop interface for your applications. This setup not only enhances user experience but also makes managing and organizing items intuitive and efficient. The combination of React, Tailwind CSS, and Dnd-kit provides a robust foundation for building such interactive features.

Feel free to customize and extend this implementation to suit your specific needs. Happy coding!