Drag Box
Creates a draggable starting element that can be dropped on SplitScreen, and can also be used as a pure Drag & Drop source if needed.
Basic usage
FlexLayoutSplitScreenDragBoxits children are the UI that the user grabs, and targetComponentis the actual screen inserted into the split screen after drop.
navigationTitle only passes label data.
The navigationTitle of the DragBox is the label data of the dropped screen. The DragBox does not hold title renderers like navigationTitleComponent, and the actual title design is determined by the navigationTitleComponent of the drop target FlexLayoutSplitScreen.
Cancel drag with Escape
Pressing Escape while dragging cancels the current drag. It cleans up the clone and pending drag state and propagates isDragging false / isDrop false, so the split guidance of the Split Screen also disappears immediately, and dropEndCallback or screen split does not occur.
Next.js URL rendering
When imported from the Next.js entry, you can pass only url instead of targetComponent. iframe defaults to false; when false, rendering goes through the generated registry and Provider on the server.
Drop outside the document
dropDocumentOutsideOptionIf provided, you can configure opening a new window or tab when it is dropped outside the document.
Frequently used props
navigationTitle
drop 후 화면에 붙는 라벨 데이터입니다. 타이틀 UI 스타일은 수신하는 FlexLayoutSplitScreen이 담당합니다.
dropEndCallback
drop이 끝난 뒤 x, y, containerName을 받아 후처리합니다.
isBlockingActiveInput
input/textarea/select/contenteditable 등 active 입력 요소에서 drag 시작을 막을지 제어합니다. 기본값은 false입니다.
customData
드래그 중 함께 전달할 string/number/boolean 기반의 커스텀 데이터입니다.
scrollTargetRef
드래그 중 viewport edge auto-scroll 대신 특정 scroll container를 대상으로 삼을 때 사용합니다.