@alitajs/dnd

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

Usage no npm install needed!

<script type="module">
  import alitajsDnd from 'https://cdn.skypack.dev/@alitajs/dnd';
</script>

README

@alitajs/dnd

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

用法

yarn add @alitajs/dnd

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

umi 中使用，可以直接安装插件 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 实现，实际使用中，发现标签包裹最好用