Implementieren von Drag & Drop zum Anordnen/Sortieren von Elementen mit React, Tailwind CSS und Dnd-kit

Einführung

Haben Sie sich jemals gefragt, wie Anwendungen wie Trello oder Asana ihre intuitiven Drag-and-Drop-Oberflächen verwalten? Stellen Sie sich vor, Sie haben eine Anwendung, bei der Benutzer ihre Artikel einfach sortieren müssen. Ohne eine reibungslose Drag-and-Drop-Funktion kann diese Aufgabe mühsam und frustrierend werden. In diesem Blogbeitrag untersuchen wir, wie Sie mithilfe von React, Tailwind CSS und Dnd-kit eine dynamische Drag-and-Drop-Funktionalität implementieren, um eine nahtlose Benutzererfahrung beim Anordnen und Sortieren von Elementen zu schaffen.

Problem der realen Welt

In der realen Welt erfordern Anwendungen oft, dass Benutzer Elemente basierend auf Priorität, Status oder anderen Kriterien neu anordnen. Beispielsweise muss ein Benutzer seine Ideen möglicherweise während einer Brainstorming-Sitzung schnell neu ordnen. Ohne eine effiziente Drag-and-Drop-Funktion könnte dieser Prozess umständliche Schritte wie das manuelle Bearbeiten von Elementpositionen oder die Verwendung ineffizienter Schaltflächen zum Nach-oben-/Nach-unten-Verschieben erfordern. Unser Ziel ist es, eine Lösung bereitzustellen, die diesen Prozess vereinfacht und ihn für Benutzer intuitiver und effizienter macht.

Anwendungsfall

Betrachten wir einen Anwendungsfall eines Brainstorming-Tools, mit dem Benutzer ihre Ideen organisieren können. Benutzer benötigen die Fähigkeit:

• Neue Ideen zu einer Liste hinzufügen.

• Sortieren und priorisieren Sie diese Ideen, indem Sie sie per Drag & Drop in die gewünschte Reihenfolge ziehen.

• Ideen zwischen verschiedenen Kategorien verschieben (z. B. neue Ideen vs. alte Ideen).

Um dies zu erreichen, erstellen wir eine React-Anwendung mit Vite für die Projekteinrichtung, Tailwind CSS für das Styling und Dnd-kit für die Drag-and-Drop-Funktionalität. Dieses Setup ermöglicht es uns, eine benutzerfreundliche Oberfläche zu erstellen, die die Produktivität und das Benutzererlebnis verbessert.

Einrichten des Projekts

• Initialisieren Sie das Vite-Projekt

npm create vite@latest my-drag-drop-app --template reagieren
cd meine-drag-drop-app
npm install

• Erforderliche Abhängigkeiten installieren:

NPM Install Tailwindcss DND-Kit React-Hot-Toast React-Icons

• Tailwind CSS konfigurieren:

npx tailwindcss init

• tailwind.config.js aktualisieren:

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

• Tailwind-Anweisungen zu index.css hinzufügen:

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

Drag-and-Drop implementieren

App.jsx

Die App.jsx-Datei ist die Hauptkomponente, die das Gesamtlayout der Anwendung einrichtet und den globalen Status verwaltet.

Zusammenfassung

• Hauptkomponente zur Verwaltung des gesamten Anwendungsstatus.

• Verwendet useState, um Projektdaten und Aktualisierungen zu verwalten.

• Enthält die Header- und DragDropArrange-Komponenten für Benutzeroberfläche und Funktionalität.

• Inklusive Toaster von React-Hot-Toast für Benachrichtigungen.

Schlüsselfunktionen:

• Statusverwaltung: Verwaltet den Status für Projektdaten.

• Neue Daten verarbeiten: Funktion zum Hinzufügen neuer Daten zum Projektdatenstatus.

• Layout: Richtet das Layout einschließlich Kopfzeile, Hauptinhalt und Benachrichtigungen ein.
  

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;

Header.jsx

Die Datei Header.jsx dient als Navigationsleiste und bietet eine Schaltfläche zum Öffnen eines Formulars zum Hinzufügen neuer Elemente.

Zusammenfassung:

• Enthält Navigation und eine Schaltfläche zum Öffnen des Artikeleingabeformulars.

• Verwendet useState, um den Status der Sichtbarkeit des Elementeingabeformulars zu verwalten.

• Verwaltet Benutzerinteraktionen zum Hinzufügen neuer Elemente.

Schlüsselfunktionen:

• Artikelformular umschalten: Verwaltet die Sichtbarkeit des Artikeleingabeformulars.

• Neue Daten verarbeiten: Übergibt die neuen Artikeldaten an die übergeordnete Komponente.
  

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

Die Datei AddIdea.jsx stellt das Formular zum Hinzufügen neuer Elemente bereit, einschließlich Validierungs- und Übermittlungsfunktionen.

Zusammenfassung:

• Komponente zum Hinzufügen neuer Elemente zur Liste.

• Verwendet useState, um Formulareingabedaten und Zeichenanzahl zu verwalten.

• Validiert die Eingabelänge und übermittelt neue Daten an die übergeordnete Komponente.

Schlüsselfunktionen:

• Handle-Änderung: Verwaltet Formulareingabe und Zeichenanzahl.

• Handle Submit: Validiert und sendet die Formulardaten an die übergeordnete Komponente.
  

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

Die Datei DragDropArrange.jsx ist für die Verwaltung der Drag-and-Drop-Funktionalität und die Aktualisierung der Reihenfolge von Elementen basierend auf Benutzerinteraktionen verantwortlich.

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!

Source Code

You can find the complete source code for this project in my GitHub repository:
Github Link

Das obige ist der detaillierte Inhalt vonImplementieren von Drag & Drop zum Anordnen/Sortieren von Elementen mit React, Tailwind CSS und Dnd-kit. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!