拖动框

创建可以在SplitScreen中放置的拖动开始元素，并在需要时作为纯Drag & Drop源使用.

基本用法

FlexLayoutSplitScreenDragBox的 children 是用户抓取的 UI， targetComponent是 drop 后进入 split screen 的实际屏幕。

tsx

<FlexLayoutSplitScreenDragBox
  containerName="customer-detail"
  navigationTitle="Customer"
  targetComponent={<CustomerDetail />}
>
  <button type="button">Customer Detail</button>
</FlexLayoutSplitScreenDragBox>

navigationTitle仅传递标签数据.

DragBox的navigationTitle是放置的屏幕的标签数据。DragBox不保留像navigationTitleComponent这样的标题渲染器，实际标题设计由放置目标FlexLayoutSplitScreen的navigationTitleComponent决定.

屏幕数据和标题设计分离

将相同的DragBox放置到不同的分屏中时，navigationTitle值相同，但可以遵循各自分屏的标题包装器设计.

使用Escape取消拖动

在拖动时按Escape将取消当前拖动。清理克隆和待处理拖动状态，并传播isDragging false / isDrop false，因此分屏的分割指引也会立即消失，dropEndCallback或屏幕分割不会执行.

Next.js URL 渲染

在 Next.js 专用入口中导入时，可以只传递 URL 而不是 targetComponent。iframe 默认为 false，当为 false 时通过生成的 registry 和 Provider 进行服务器渲染。

tsx

import { FlexLayoutSplitScreenDragBox } from "@byeolnaerim/flex-layout/next";

<FlexLayoutSplitScreenDragBox
  url="/orders/1"
  containerName="order-1"
  navigationTitle="Order #1"
>
  <span>Order #1</span>
</FlexLayoutSplitScreenDragBox>

tsx

<FlexLayoutSplitScreenDragBox
  url="https://example.com"
  iframe
  containerName="external"
  navigationTitle="External"
>
  <span>External</span>
</FlexLayoutSplitScreenDragBox>

文档外拖放

dropDocumentOutsideOption可以配置在文档外拖放时打开新窗口/标签的操作。

tsx

<FlexLayoutSplitScreenDragBox
  containerName="order"
  navigationTitle="Order"
  targetComponent={<OrderView />}
  dropDocumentOutsideOption={{
    openUrl: "/orders/1",
    widthRatio: 0.7,
    heightRatio: 0.8,
    isNewTap: false,
  }}
>
  <span>Order #1</span>
</FlexLayoutSplitScreenDragBox>

常用的 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를 대상으로 삼을 때 사용합니다.