How to Drag Drop Material-UI Cards

Question

Can i know How to Drag/Drop Material-UI Cards

Answer 1

You can use the @dnd-kit/core library, which is a lightweight and flexible solution for drag-and-drop interactions. Below is a precise example of how to implement this:

Steps and Code Example

Install Dependencies:

Ensure you have @dnd-kit/core installed along with Material-UI:

npm install @dnd-kit/core @mui/material @emotion/react @emotion/styled

Basic Implementation:

Use DndContext, Draggable, and Droppable from @dnd-kit/core to make MUI Cards draggable and droppable.

import React, { useState } from 'react';

import { DndContext, closestCenter } from '@dnd-kit/core';

import { SortableContext, useSortable, arrayMove, verticalListSortingStrategy } from '@dnd-kit/sortable';

import { CSS } from '@dnd-kit/utilities';

import { Card, CardContent, Typography } from '@mui/material';

const SortableCard = ({ id, title }) => {

  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id });

  const style = {

    transform: CSS.Transform.toString(transform),

    transition,

    marginBottom: '8px',

  };

  return (

    <div ref={setNodeRef} style={style} {...attributes} {...listeners}>

      <Card>

        <CardContent>

          <Typography>{title}</Typography>

        </CardContent>

      </Card>

    </div>

  );

};


// Main Component

const App = () => {

  const [items, setItems] = useState([

    { id: '1', title: 'Card 1' },

    { id: '2', title: 'Card 2' },

    { id: '3', title: 'Card 3' },

  ]);

  const handleDragEnd = (event) => {

    const { active, over } = event;

    if (active.id !== over.id) {

      const oldIndex = items.findIndex((item) => item.id === active.id);

      const newIndex = items.findIndex((item) => item.id === over.id);

      setItems((items) => arrayMove(items, oldIndex, newIndex));

    }

  };

  return (

    <DndContext collisionDetection={closestCenter} onDragEnd={handleDragEnd}>

      <SortableContext items={items.map((item) => item.id)} strategy={verticalListSortingStrategy}>

        {items.map((item) => (

          <SortableCard key={item.id} id={item.id} title={item.title} />

        ))}

      </SortableContext>

    </DndContext>

  );

};

export default App;