양식 제어 간 드래그 앤 드롭

현재 구현자 인터페이스에서 드래그 앤 드롭은 다음 방식으로 동작합니다.

a. 최초 드래그 앤 드롭

제어 목록에서 캔버스로 제어를 끌 때 발생합니다. 제어 목록은 사용 가능한 모든 제어가 표시되는 왼쪽 위 패널입니다.

1. 제어를 선택해 드래그가 시작되면(dragStart 이벤트) 드래그 데이터(`event.dataTransfer`)를 설정합니다. 데이터는 해당 제어의 descriptor에 있는 기본 메타데이터입니다.

데이터는 `data` 유형으로 설정됩니다.

2. 제어가 유효한 드롭 대상(Cells)에 들어오면 사용자가 그곳에 놓아 제어를 표시할 수 있습니다.

b. 후속 드래그 앤 드롭

양식에 렌더링된 제어를 한 유효한 드롭 대상에서 다른 대상으로 옮길 때 발생합니다. 이때도 드래그 데이터를 설정하지만 갱신된 메타데이터를 사용합니다.

도메인 제어는 드래그 앤 드롭 API를 알 필요가 없습니다.

드래그 앤 드롭 기능에는 다음 구성 요소가 관여합니다.

• Grid. Row. Cell. ControlWrapper. Draggable 클래스. DropTarget 클래스. control pool.

Draggable 클래스:

드래그 가능하게 만들 제어가 상속하는 상위 클래스입니다. 드래그 작업과 드래그 데이터 설정에 도움이 되는 여러 메서드를 제공합니다.

onDragStart 메서드는 제어의 `onDragStart` 이벤트에 연결해야 합니다. 이 메서드는 `processDragStart`를 호출하며 실제 드래그 시작 이벤트에서 추가 처리가 필요하면 이를 재정의해야 합니다.

onDragEnd 메서드는 제어의 `onDragEnd` 이벤트에 연결해야 합니다. 구성 요소가 다른 곳에 놓이면 드래그가 시작된 상위 구성 요소에 알려 이동을 처리하도록 합니다.

DropTarget 클래스:

Grid는 Rows로 구성되고 Rows는 Cells로 구성됩니다. 이 Grid가 구성 요소 표시용 테이블 구조를 만듭니다.

Grid는 Rows를 관리하며 현재 모든 행이 제어로 채워지면 새 행을 추가합니다. 따라서 사용자가 공간 확보를 위해 행을 직접 추가할 필요가 없습니다.

Rows는 Cells를 관리하며 가로 공간을 제한하기 위해 현재 한 행의 셀 수가 고정되어 있습니다.