Melaksanakan Drag dan Drop untuk Menyusun/Isih Item dengan React, Tailwind CSS dan Dnd-kit

pengenalan

Pernahkah anda terfikir bagaimana aplikasi seperti Trello atau Asana mengurus antara muka seret dan lepas intuitif mereka? Bayangkan anda mempunyai aplikasi di mana pengguna perlu mengisih item mereka dengan mudah. Tanpa ciri drag-and-drop yang lancar, tugas ini boleh menjadi membosankan dan mengecewakan. Dalam catatan blog ini, kami akan meneroka cara melaksanakan fungsi drag-and-drop dinamik menggunakan React, Tailwind CSS dan Dnd-kit untuk mencipta pengalaman pengguna yang lancar untuk mengatur dan mengisih item.

Masalah Dunia Sebenar

Dalam dunia nyata, aplikasi sering memerlukan pengguna menyusun semula item berdasarkan keutamaan, status atau kriteria lain. Sebagai contoh, pengguna mungkin perlu menyusun semula idea mereka dengan cepat semasa sesi sumbang saran. Tanpa ciri drag-and-drop yang cekap, proses ini boleh melibatkan langkah yang menyusahkan seperti mengedit kedudukan item secara manual atau menggunakan butang bergerak naik/turun yang tidak cekap. Matlamat kami adalah untuk menyediakan penyelesaian yang memudahkan proses ini, menjadikannya lebih intuitif dan cekap untuk pengguna.

Use Case

Mari kita pertimbangkan kes penggunaan alat sumbang saran yang membolehkan pengguna menyusun idea mereka. Pengguna memerlukan keupayaan untuk:

• Tambahkan idea baharu pada senarai.

• Isih dan utamakan idea ini dengan menyeret dan menjatuhkannya ke dalam susunan yang diingini.

• Alihkan idea antara kategori yang berbeza (cth., idea baharu lwn. idea lama).

Untuk mencapai matlamat ini, kami akan membina aplikasi React menggunakan Vite untuk persediaan projek, Tailwind CSS untuk penggayaan dan Dnd-kit untuk fungsi drag-and-drop. Persediaan ini akan membolehkan kami mencipta antara muka mesra pengguna yang meningkatkan produktiviti dan pengalaman pengguna.

Menyediakan Projek

• Mulakan Projek Vite

npm buat vite@latest my-drag-drop-app --template react
cd my-drag-drop-app
pemasangan npm

• Pasang Ketergantungan yang Diperlukan:

npm pasang tailwindcss dnd-kit react-hot-toast react-icons

• Konfigurasikan Tailwind CSS:

npx tailwindcss init

• Kemas kini tailwind.config.js:

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

• Tambahkan arahan Tailwind pada index.css:

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

Melaksanakan Drag dan Drop

App.jsx

Fail App.jsx ialah komponen utama yang menyediakan reka letak keseluruhan aplikasi dan mengurus keadaan global.

Ringkasan

• Komponen utama untuk mengurus keadaan aplikasi keseluruhan.

• Menggunakan useState untuk mengendalikan data projek dan kemas kini.

• Menggabungkan komponen Pengepala dan DragDropArrange untuk UI dan kefungsian.

• Termasuk Pembakar roti daripada react-hot-toast untuk pemberitahuan.

Fungsi Utama:

• Pengurusan Negeri: Menguruskan data keadaan untuk projek.

• Kendalikan Data Baharu: Berfungsi untuk menambah data baharu pada keadaan data projek.

• Reka letak: Sediakan reka letak termasuk pengepala, kandungan utama dan pemberitahuan.
  

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

Fail Header.jsx berfungsi sebagai bar navigasi, menyediakan butang untuk membuka borang untuk menambah item baharu.

Ringkasan:

• Mengandungi navigasi dan butang untuk membuka borang input item.

• Menggunakan useState untuk mengurus keadaan keterlihatan borang input item.

• Mengendalikan interaksi pengguna untuk menambah item baharu.

Fungsi Utama:

• Togol Borang Item: Menguruskan keterlihatan borang input item.

• Kendalikan Data Baharu: Menghantar data item baharu kepada komponen induk.
  

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

Fail AddIdea.jsx menyediakan borang untuk menambah item baharu, termasuk fungsi pengesahan dan penyerahan.

Ringkasan:

• Komponen untuk menambah item baharu pada senarai.

• Menggunakan useState untuk mengurus data input borang dan kiraan aksara.

• Mengesahkan panjang input dan menyerahkan data baharu kepada komponen induk.

Fungsi Utama:

• Kendalikan Perubahan: Mengurus input borang dan kiraan aksara.

• Kendalikan Serah: Mengesahkan dan menyerahkan data borang kepada komponen induk.
  

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

Fail DragDropArrange.jsx bertanggungjawab untuk mengurus fungsi seret dan lepas dan mengemas kini susunan item berdasarkan interaksi pengguna.

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

Atas ialah kandungan terperinci Melaksanakan Drag dan Drop untuk Menyusun/Isih Item dengan React, Tailwind CSS dan Dnd-kit. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!