기본 사용법

ddo-dnd는 컨테이너/아이템 컴포넌트와 훅 조합으로 구성됩니다.

DragContainer: 드래그 영역 루트
DraggableItem: 실제 렌더링되는 블록
DraggingItem: 드래그 중일 때 새롭게 렌더링 되는 블록
useDragBlock: 드래그 로직(경계 체크, 충돌 처리)


<DragContainer containerRef={containerRef}>
  <DraggableItem
    position={block.position}
    isDragging={draggingBlock?.id === block.id}
    handleStartDrag={e => handleStartDrag((e as any).nativeEvent, block)}
  >
    <div style={{ width: block.size.width, height: block.size.height }}>
      {/* contents */}
    </div>
  </DraggableItem>
 
  {dragPointerPosition && draggingBlock && (
    <DraggingItem
      position={{
        x: dragPointerPosition.x - dragOffset.x,
        y: dragPointerPosition.y - dragOffset.y,
      }}
    >
      <div
        style={{
          width: draggingBlock.size.width,
          height: draggingBlock.size.height,
        }}
      >
        {/* ghost */}
      </div>
    </DraggingItem>
  )}
</DragContainer>

충돌 옵션


collisionOptions?: {
  enabled?: boolean;          // 기본 false
  mode?: 'rectangle'|'circle'|'obb'; // 기본 'rectangle'
}

rectangle: AABB 빠른 충돌
circle: 원 근사 충돌
obb: 회전 박스(정확, 상대적으로 비용 큼)

타입 확장

BlockType을 확장하여 사용하세요.


import type { BlockType } from 'ddo-dnd';
 
type MyBlock = BlockType & {
  title: string;
  color?: string;
};