[React] 드래그로 DOM 요소 선택

react select by dragging

 

다음은 React 컴포넌트로 드래그로 요소를 선택하는 기능을 구현한 예제입니다. 드래그하는 동안 선택 영역에 포함된 요소들을 감지하여 선택된 요소들을 표시합니다. CSS 스타일은 별도의 styles.css 파일에서 정의합니다.

 

반응형

 

import React, { useState } from 'react';
import './styles.css'; // 스타일 시트를 import

function DragSelect() {
  const [isDragging, setIsDragging] = useState(false); // 드래그 상태를 관리하는 상태
  const [startX, setStartX] = useState(0); // 드래그 시작 X 좌표
  const [startY, setStartY] = useState(0); // 드래그 시작 Y 좌표
  const [endX, setEndX] = useState(0); // 드래그 끝 X 좌표
  const [endY, setEndY] = useState(0); // 드래그 끝 Y 좌표
  const [selectedItems, setSelectedItems] = useState([]); // 선택된 요소들을 저장하는 배열

  // 드래그 시작 핸들러
  const handleMouseDown = (event) => {
    setIsDragging(true); // 드래그 시작
    setStartX(event.clientX); // 드래그 시작 X 좌표 설정
    setStartY(event.clientY); // 드래그 시작 Y 좌표 설정
    setSelectedItems([]); // 새로운 드래그 시작시 선택된 요소 배열 초기화
  };

  // 드래그 중 핸들러
  const handleMouseMove = (event) => {
    if (!isDragging) return; // 드래그 중이 아니면 무시

    setEndX(event.clientX); // 드래그 끝 X 좌표 설정
    setEndY(event.clientY); // 드래그 끝 Y 좌표 설정

    // 드래그 영역 계산
    const minX = Math.min(startX, endX);
    const minY = Math.min(startY, endY);
    const maxX = Math.max(startX, endX);
    const maxY = Math.max(startY, endY);

    // 선택된 요소 찾기
    const newSelectedItems = Array.from(document.querySelectorAll('.selectable')).filter(item => {
      const rect = item.getBoundingClientRect();
      return rect.left < maxX && rect.right > minX && rect.top < maxY && rect.bottom > minY;
    });

    setSelectedItems(newSelectedItems); // 선택된 요소들 업데이트
  };

  // 드래그 종료 핸들러
  const handleMouseUp = () => {
    setIsDragging(false); // 드래그 종료
  };

  return (
    <div
      className="container"
      onMouseDown={handleMouseDown}
      onMouseMove={handleMouseMove}
      onMouseUp={handleMouseUp}
    >
      {/* 선택 가능한 요소들 */}
      <div className="selectable">Item 1</div>
      <div className="selectable">Item 2</div>
      <div className="selectable">Item 3</div>
      <div className="selectable">Item 4</div>
      <div className="selectable">Item 5</div>

      {/* 선택된 요소들을 표시 */}
      {selectedItems.map((item, index) => (
        <div key={index} className="selected-item">{item.textContent}</div>
      ))}
    </div>
  );
}

export default DragSelect;