드래그 앤 드롭

🙂드래그 앤 드롭은 예전에 자주 사용했지만 지금은 많이 쓰이지않는다. ㅠㅠㅠ

예를들면 장바구니에 물건을 담을때 쓰거나, 파일을 옮길때 썻는데, 복사 붙여넣기로 요즘 다 가능하다보니 자주 쓰이지는 않지만 그래도 한번 만들어보면서 어떤 기능들과 어떤 코드들로 만들었는지

👀코드와 설명을 해볼려고합니다

일단은 코드는 리액트로 구현했습니다.

😫 아이템 목록을 만들고, 아이템이 드래그되어 첫번째 칸에 놓여진다면 "아이템이 특정 위치에 드롭되었습니다!" 라는 alert창을 뛰우기로 했습니다.

// src/List.js
import React, { useState } from 'react';
import './List.css';

const List = () => {
  const [items, setItems] = useState([
    { id: 1, text: '아이템 1' },
    { id: 2, text: '아이템 2' },
    { id: 3, text: '아이템 3' },
  ]);

  // 아이템을 드래그할 때 호출되는 함수
  const handleDragStart = (e, index) => {
    e.dataTransfer.setData('index', index);
  };

  // 드래그된 아이템을 새 위치로 이동시키는 함수
  const handleDragOver = (e, index) => {
    e.preventDefault(); // 기본 동작 방지

    const draggedIndex = parseInt(e.dataTransfer.getData('index'));

    // 아이템의 새로운 배열 생성
    const newItems = [...items];

    // 드래그된 아이템을 원래 위치에서 제거
    const draggedItem = newItems.splice(draggedIndex, 1)[0];

    // 드래그된 아이템을 새 위치에 삽입
    newItems.splice(index, 0, draggedItem);

    // 상태 업데이트로 아이템 순서 변경
    setItems(newItems);
  };

  // 아이템을 드롭했을 때 호출되는 함수
  const handleDrop = (e, index) => {
    e.preventDefault(); // 기본 동작 방지

    // 드래그된 아이템의 인덱스 가져오기
    const draggedIndex = parseInt(e.dataTransfer.getData('index'));

    // 아이템이 특정 위치에 드롭되었는지 확인 (예: index === 0)
    if (index === 0) {
      // 특정 위치에 아이템이 드롭되면 알림 표시
      alert('아이템이 특정 위치에 드롭되었습니다!');
    }
  };

  // 드래그가 종료될 때 호출되는 함수
  const handleDragEnd = () => {
    // 필요한 경우 드래깅 데이터 초기화
  };

  return (
    <div className="list-container">
      {items.map((item, index) => (
        <div
          key={item.id}
          className="list-item"
          draggable
          onDragStart={e => handleDragStart(e, index)}
          onDragOver={e => handleDragOver(e, index)}
          onDrop={e => handleDrop(e, index)}
          onDragEnd={handleDragEnd}
        >
          {item.text}
        </div>
      ))}
    </div>
  );
};

export default List;

1. 아이템 순서 변경: 리스트의 각 아이템을 마우스로 클릭하여 드래그하고, 다른 위치로 드롭하여 아이템의 순서를 변경

2.드래그 앤 드롭 이벤트 처리: handleDragStart, handleDragOver, handleDrop, handleDragEnd 함수들을 사용하여 드래그 앤 드롭 이벤트를 처리

3.상태 관리: React의 useState 훅을 사용하여 아이템 목록의 상태를 관리하고, 드롭 이벤트에 따라 상태를 업데이트하여 UI를 다시 렌더링

4.알림 표시: handleDrop 함수 내에서 특정 위치에 아이템을 드롭할 때 알림 창을 띄우는 기능

// src/App.js
import React from "react";
import List from "./List";

const App = () => {
  return (
    <div style={{ textAlign: "center", marginTop: "50px" }}>
      <h1>드래그 앤 드롭 리스트</h1>
      <List />
    </div>
  );
};

export default App;

😓그리고 약간의 CSS ㅎㅎㅎ

/* src/List.css */
.list-container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .list-item {
    padding: 8px;
    margin: 4px;
    background-color: #f0f0f0;
    cursor: move;
  }
  

😭화면에 아이템들이 빠르게 계속 바뀌는데 렌더링이 어떻게 일어나는건지 다시 코드좀 보고 해결을 해봐야겠습니다.