我的文档库

多根目录侧边栏

flex-layout

  • Getting Started

  • Guides

  • Reference

typed-rx-http

  • Getting Started

  • Guides

  • Reference

global-rx-state

  • Getting Started

  • Guides

  • Reference

webflux-fe-dev-assistant

reactive-mongo-dsl

拖动框

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


基本用法

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

tsx
navigationTitle仅传递标签数据.

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

使用Escape取消拖动

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

Next.js URL 渲染

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

tsx
tsx
文档外拖放

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

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

© 2026 Byeolnaerim. 保留所有权利.介绍隐私政策