DragAndDrop

一个react的dnd封装,兼容手机端,简化用法。

用法

yarn add @alitajs/dnd

使用 DndProvider 包裹你的上下文,不一定是根节点上,也可以是任意的不容易发生变动的页面根节点都可以。

可以直接安装插件 umi-plugin-dnd

API

Drag

将允许被拖动的节点,用 Drag 包裹

data

  • 参数类型:any
  • 描述:在拖动事件响应的时候可以取到它,你可以写满足你判断的任意数据
  • 是否必须: 是
  • 默认值:无

type

  • 参数类型:String
  • 描述:描述拖放组件的类型,只有同类型的组件才会互相响应
  • 是否必须: 是
  • 默认值:'dragBox'

icon

  • 参数类型:image
  • 描述:添加被拖动时的预览图片,在移动端无效
  • 是否必须: 否
  • 默认值:无

Drop

将允许被放置的节点,用 Drop 包裹

onDrop

  • 参数类型:func
  • 描述:被放置时响应的函数
  • 是否必须: 是
  • 默认值:无

data

  • 参数类型:any
  • 描述:在拖动事件响应的时候可以取到它,你可以写满足你判断的任意数据
  • 是否必须: 是
  • 默认值:无

type

  • 参数类型:String
  • 描述:描述拖放组件的类型,只有同类型的组件才会互相响应
  • 是否必须: 是
  • 默认值:'dragBox'

style

  • 参数类型:Style
  • 描述:组件的默认样式
  • 是否必须: 否
  • 默认值:无

canDropStyle

  • 参数类型:Style
  • 描述:组件的允许被放置时的样式,是一个中间状态
  • 是否必须: 否
  • 默认值:无

onOverStyle

  • 参数类型:Style
  • 描述:组件的允许将被放置时的样式,是一个hover状态
  • 是否必须: 否
  • 默认值:{ border: '1px dashed black',}

有想过使用高阶组件或者 hooks 实现,实际使用中,发现标签包裹最好用