Seret Kotak

Membuat elemen awal drag yang dapat dijatuhkan ke SplitScreen, dan jika perlu, juga digunakan sebagai sumber Drag & Drop murni.

Penggunaan dasar

FlexLayoutSplitScreenDragBoxanak dari targetComponentadalah UI yang dipegang pengguna, dan

tsx

Judul navigasi hanya mengirimkan data label.

Judul navigasi DragBox adalah data label dari layar yang dijatuhkan. DragBox tidak menyimpan renderer judul seperti navigationTitleComponent, dan desain judul yang sebenarnya ditentukan oleh navigationTitleComponent dari FlexLayoutSplitScreen yang menjadi target drop.

Memisahkan data layar dan desain judul

Jika DragBox yang sama dijatuhkan ke Split Screen yang berbeda, nilai navigationTitle akan sama tetapi dapat mengikuti desain wrapper judul dari masing-masing Split Screen.

Batalkan drag dengan Escape

Menekan Escape saat drag akan membatalkan drag saat ini. Membersihkan clone dan status drag yang tertunda serta menyebarkan isDragging false / isDrop false sehingga panduan pembagian di Split Screen juga segera menghilang dan dropEndCallback atau pembagian layar tidak akan dieksekusi.

Render URL di Next.js

Saat diimpor dari entri khusus Next.js, hanya URL yang dapat diteruskan sebagai targetComponent. iframe secara default adalah false, dan saat false, merender melalui registry dan Provider yang dihasilkan.

tsx

drop di luar dokumen

dropDocumentOutsideOptiondapat mengonfigurasi tindakan untuk membuka jendela/tab baru saat dijatuhkan di luar dokumen.

tsx

props yang sering digunakan

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