Drag & Drop

7 | 8 | <DragAndDrop /> 9 | </div> 10 | ) 11 | } 12 | export default App 13 | -------------------------------------------------------------------------------- /src/assets/index.ts: -------------------------------------------------------------------------------- 1 | import { Data } from "../interfaces"; 2 | 3 | export const data: Data[] = [ 4 | { 5 | id: 1, 6 | content: 'Aqua-man', 7 | status: 'good' 8 | }, 9 | { 10 | id: 2, 11 | content: 'Flash', 12 | status: 'normal' 13 | }, 14 | { 15 | id: 3, 16 | content: 'Green Lantern', 17 | status: 'good' 18 | }, 19 | { 20 | id: 4, 21 | content: 'Batman', 22 | status: 'bad' 23 | }, 24 | ] 25 | -------------------------------------------------------------------------------- /src/components/CardItem.tsx: -------------------------------------------------------------------------------- 1 | import { Data } from "../interfaces" 2 | 3 | interface Props { 4 | data: Data, 5 | handleDragging: (dragging: boolean) => void 6 | } 7 | 8 | export const CardItem = ({ data, handleDragging }: Props) => { 9 | 10 | const handleDragStart = (e: React.DragEvent<HTMLDivElement>) => { 11 | e.dataTransfer.setData('text', `${data.id}`) 12 | handleDragging(true) 13 | } 14 | const handleDragEnd = () => handleDragging(false) 15 | 16 | return ( 17 | <div 18 | className='card-container' 19 | draggable 20 | onDragStart={handleDragStart} 21 | onDragEnd={handleDragEnd} 22 | > 23 | <p>{data.content}</p> 24 | </div> 25 | ) 26 | } -------------------------------------------------------------------------------- /src/components/ContainerCards.tsx: -------------------------------------------------------------------------------- 1 | import { Data, Status } from "../interfaces" 2 | import { CardItem } from "./CardItem" 3 | 4 | interface Props { 5 | items: Data[] 6 | status: Status 7 | isDragging: boolean 8 | handleUpdateList: (id: number, status: Status) => void 9 | handleDragging: (dragging: boolean) => void 10 | } 11 | 12 | export const ContainerCards = ({ items = [], status, isDragging, handleDragging, handleUpdateList }: Props) => { 13 | 14 | const handleDrop = (e: React.DragEvent<HTMLDivElement>) => { 15 | e.preventDefault(); 16 | handleUpdateList(+e.dataTransfer.getData('text'), status) 17 | handleDragging(false) 18 | } 19 | 20 | const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => e.preventDefault() 21 | 22 | return ( 23 | <div 24 | className={`layout-cards ${isDragging ? 'layout-dragging' : ''}`} 25 | onDrop={handleDrop} 26 | onDragOver={handleDragOver} 27 | > 28 | <p>{status} hero</p> 29 | { 30 | items.map(item => ( 31 | status === item.status 32 | && <CardItem 33 | data={item} 34 | key={item.id} 35 | handleDragging={handleDragging} 36 | /> 37 | )) 38 | } 39 | </div> 40 | ) 41 | } 42 | -------------------------------------------------------------------------------- /src/components/DragAndDrop.tsx: -------------------------------------------------------------------------------- 1 | import { data } from "../assets" 2 | import { useDragAndDrop } from "../hooks/useDragAndDrop" 3 | import { Status } from "../interfaces" 4 | import { ContainerCards } from "./ContainerCards" 5 | 6 | 7 | const typesHero: Status[] = ['good', 'normal', 'bad'] 8 | 9 | 10 | export const DragAndDrop = () => { 11 | const { isDragging, listItems, handleDragging, handleUpdateList } = useDragAndDrop(data) 12 | 13 | return ( 14 | <div className="grid"> 15 | { 16 | typesHero.map(container => ( 17 | <ContainerCards 18 | items={listItems} 19 | status={container} 20 | key={container} 21 | 22 | isDragging={isDragging} 23 | handleDragging={handleDragging} 24 | handleUpdateList={handleUpdateList} 25 | /> 26 | )) 27 | } 28 | </div> 29 | ) 30 | } -------------------------------------------------------------------------------- /src/components/Title.tsx: -------------------------------------------------------------------------------- 1 | 2 | export const Title = () => { 3 | return ( 4 | <div className="title flex"> 5 | <h1>Creating basic Drag & Drop 👆 </h1> 6 | <span>( without external libraries )</span> 7 | </div> 8 | ) 9 | } 10 | -------------------------------------------------------------------------------- /src/components/index.ts: -------------------------------------------------------------------------------- 1 | export * from './CardItem' 2 | export * from './ContainerCards' 3 | export * from './Title' 4 | export * from './DragAndDrop' -------------------------------------------------------------------------------- /src/hooks/useDragAndDrop.ts: -------------------------------------------------------------------------------- 1 | import { useState } from "react" 2 | import { Data, Status } from "../interfaces" 3 | 4 | export const useDragAndDrop = (initialState: Data[]) => { 5 | 6 | const [isDragging, setIsDragging] = useState(false) 7 | const [listItems, setListItems] = useState<Data[]>(initialState) 8 | 9 | const handleUpdateList = (id: number, status: Status) => { 10 | let card = listItems.find(item => item.id === id) 11 | 12 | if (card && card.status !== status) { 13 | card.status = status 14 | if (Array.isArray(listItems)) { 15 | setListItems(prev => ([ 16 | card!, 17 | ...prev.filter(item => item.id !== id) 18 | ])) 19 | } 20 | } 21 | 22 | } 23 | 24 | const handleDragging = (dragging: boolean) => setIsDragging(dragging) 25 | 26 | return { 27 | isDragging, 28 | listItems, 29 | handleUpdateList, 30 | handleDragging, 31 | } 32 | } -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700;900&display=swap'); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | background-color: #1a1a1a; 11 | color: #f2f2f2; 12 | font-family: 'Montserrat', sans-serif; 13 | font-weight: normal; 14 | } 15 | 16 | .flex { 17 | display: flex; 18 | justify-content: center; 19 | align-items: center; 20 | flex-direction: column; 21 | } 22 | 23 | .container-main { 24 | min-height: 85vh; 25 | } 26 | 27 | /* TITLE */ 28 | .title { 29 | text-align: center; 30 | padding: 2rem 0; 31 | gap: .5rem; 32 | } 33 | 34 | .title>h1 { 35 | font-size: 3.5rem; 36 | font-weight: 900; 37 | } 38 | 39 | .title>span { 40 | font-size: 1.5rem; 41 | letter-spacing: 1px; 42 | font-weight: lighter; 43 | } 44 | 45 | /* LAYOUT CARDS */ 46 | .grid { 47 | flex: 1; 48 | display: grid; 49 | grid-template-columns: 1fr 1fr 1fr; 50 | gap: 2rem; 51 | padding: 0 2rem; 52 | width: 100%; 53 | } 54 | 55 | .layout-cards { 56 | border: 2px solid #ffffff8c; 57 | border-radius: 5px; 58 | transition: all .3s linear; 59 | } 60 | 61 | .layout-cards>p { 62 | border-radius: 5px; 63 | background-color: black; 64 | text-align: center; 65 | padding: 1rem 0; 66 | font-weight: bold; 67 | text-transform: capitalize; 68 | } 69 | 70 | 71 | .layout-dragging { 72 | background: #ffffff17; 73 | border: 2px dashed #ffffff8c; 74 | } 75 | 76 | /* SINGLE CARD */ 77 | .card-container { 78 | margin: 1rem 1rem 0 1rem; 79 | background-color: slateblue; 80 | border-radius: 5px; 81 | padding: 1rem; 82 | cursor: pointer; 83 | animation: fadeIn .3s ease-in-out; 84 | } 85 | 86 | @keyframes fadeIn { 87 | 0% { 88 | opacity: 0; 89 | transform: translateY(20px); 90 | } 91 | 92 | 100% { 93 | opacity: 1; 94 | transform: translateY(0) 95 | } 96 | } 97 | 98 | .card-container>p { 99 | font-weight: bold; 100 | font-size: 1.5rem; 101 | } 102 | 103 | 104 | @media screen and (max-width: 800px) { 105 | 106 | 107 | .grid { 108 | grid-template-columns: 1fr; 109 | grid-template-rows: 1fr; 110 | } 111 | 112 | .layout-cards { 113 | overflow-y: scroll; 114 | height: 250px; 115 | min-height: 150px; 116 | max-height: 250px; 117 | } 118 | } -------------------------------------------------------------------------------- /src/interfaces/index.ts: -------------------------------------------------------------------------------- 1 | export type Status = 'good' | 'bad' | 'normal' 2 | export interface Data { 3 | id: number 4 | content: string 5 | status: Status 6 | } 7 | -------------------------------------------------------------------------------- /src/main.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( 7 | <React.StrictMode> 8 | <App /> 9 | </React.StrictMode> 10 | ) 11 | -------------------------------------------------------------------------------- /src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// <reference types="vite/client" /> 2 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "useDefineForClassFields": true, 5 | "lib": ["DOM", "DOM.Iterable", "ESNext"], 6 | "allowJs": false, 7 | "skipLibCheck": true, 8 | "esModuleInterop": false, 9 | "allowSyntheticDefaultImports": true, 10 | "strict": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "module": "ESNext", 13 | "moduleResolution": "Node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx" 18 | }, 19 | "include": ["src"], 20 | "references": [{ "path": "./tsconfig.node.json" }] 21 | } 22 | -------------------------------------------------------------------------------- /tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "module": "ESNext", 5 | "moduleResolution": "Node", 6 | "allowSyntheticDefaultImports": true 7 | }, 8 | "include": ["vite.config.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()] 7 | }) 8 | --------------------------------------------------------------------------------