#React Dnd开始

#安装

npm install react-dnd react-dnd-html5-backend

安装的第二个库为react-dnd操作html5的drag和dropAPI提供了支持。当然你也可能会用到另一个支持触摸的库这个库兼容了移动端的触摸事件。 react-dnd的拖拽功能底层是通过上述两种api实现的。

#如何使用？

js
// Let's make <Card text='Write the docs' /> draggable!

import React from 'react'
import { useDrag } from 'react-dnd'
import { ItemTypes } from './Constants'

/**
 * Your Component
 */
export default function Card({ isDragging, text }) {
  const [{ opacity }, dragRef] = useDrag(
    () => ({
      type: ItemTypes.CARD,
      item: { text },
      collect: (monitor) => ({
        opacity: monitor.isDragging() ? 0.5 : 1
      })
    }),
    []
  )
  return (
    <div ref={dragRef} style={{ opacity }}>
      {text}
    </div>
  )
}

#特点

#基于组件工作

react-dnd不提供现成的部件，拖拽的赋能是通过包装你的现有组件并注入依赖来实现的。如果你用过react router或者Flummox你应该会理解这种方式。

#包含单项数据流

React DnD 完全拥抱 React 的声明式渲染范例，并且不会改变 DOM。 它是对 Redux 和其他具有单向数据流的架构的一个很好的补充。 事实上它是建立在 Redux 之上的。

#隐藏了不同平台的差异性

HTML5 拖放有一个尴尬的 API，充满陷阱和浏览器不一致。 React DnD 在内部为您处理它们，因此您可以专注于开发应用程序，而不是解决浏览器错误。

#可扩展可测试

react-dnd底层使用html5实现拖放，但是也支持自定义拖拽实现。例如通过不使用react-dnd基于drag和drop的拖拽backend,我们可以通过监听鼠标的mouseEvent来实现自己的拖拽操作逻辑。同时react-dnd内置了模拟后端程序，让你可以在node环境下测试拖放操作。

#触摸支持

上述提到的支持触摸的包，一般用于移动端。

#非目的性

React DnD 为您提供了一组强大的原语，但它不包含任何现成的组件。 它的级别比 jQuery UI 或 interact.js 低，专注于正确进行拖放交互，而将其视觉方面（例如轴约束或捕捉）留给您。 例如，React DnD 不打算提供 Sortable 组件。 相反，它为您提供了构建您自己的工具以及您需要的任何渲染自定义所需的工具。