Drag 拖拽组件

TIP

• 基于 HTML5 原生 DnD，零依赖
• 支持插入位置指示器
• 支持选中态、复制、删除操作
• 支持跨容器拖入（accept 配置）

基本排序

卡片式 + 复制删除

跨容器拖入

API

属性名	描述	类型	默认值	是否必需
items	数据配置项	DragItemData[]	[]	否
onChange	列表变化后的回调	(list: DragItemData[]) => void	-	否
onDrop	拖拽排序完成的回调	(fromIndex: number, toIndex: number) => void	-	否
onSelected	选中 item 的回调	(item: DragItemData | null) => void	-	否
defaultKey	默认选中的 item key	string | number	-	否
selected	是否可以选中	boolean	true	否
showDashedLine	是否显示虚线边框高亮	boolean	true	否
direction	排列与拖拽检测方向	'vertical' | 'horizontal'	'vertical'	否
style	容器行内样式	CSSProperties	-	否
accept	是否接受外部容器拖入的 item	boolean	true	否
dragId	容器唯一 ID（跨容器用）	string	自动生成	否
children	传入 children 时直接渲染（不走 items 逻辑）	ReactNode	-	否