react 拖拽连接插件_React DnD 拖放库浅析

今天与你分享的是 redux 作者 Dan 的另外一个很赞的项目 react-dnd (github 9.6k star)，dnd 是 Drag and Drop 的意思，为什么他会开发 react-dnd 这个项目，这个拖放库解决了什么问题，和 html5 原生 Drag Drop API 有什么样的联系与不同，设计有什么独特之处？让我们带着这些问题一起来了解一下 React DnD 吧。

React DnD 是什么？

React DnD是React和Redux核心作者 Dan Abramov创造的一组React 高阶组件，可以在保持组件分离的前提下帮助构建复杂的拖放接口。它非常适合Trello 之类的应用程序，其中拖动在应用程序的不同部分之间传输数据，并且组件会根据拖放事件更改其外观和应用程序状态。

image

React DnD 的出发点

现有拖放插件的问题

jquery 插件思维模式，直接改变DOM

拖放状态改变的影响不仅限于 CSS 类这种改变，不支持更加自定义

HTML5 拖放API的问题

不支持移动端

拖动预览问题

无法开箱即用

React DnD 的需求

默认使用 HTML5 拖放API，但支持

不直接操作 DOM

DOM 和拖放的源和目标解耦

融入HTML5拖放中窃取类型匹配和数据传递的想法

React DnD 的特点

专注拖拽，不提供现成组件

React DnD提供了一组强大的原语，但它不包含任何现成组件，而是采用包裹使用者的组件并注入 props 的方式。 它比jQuery UI等更底层，专注于使拖放交互正确，而把视觉方面的效果例如坐标限制交给使用者处理。这其实是一种关注点分离的原则，例如React DnD不打算提供可排序组件，但是使用者可以基于它快速开发任何需要的自定义的可排序组件。

单向数据流

类似于 React 一样采取声明式渲染，并且像 redux 一样采用单向数据流架构，实际上内部使用了 Redux

隐藏了平台底层API的问题

HTML5拖放API充满了陷阱和浏览器的不一致。 React DnD为您内部处理它们，因此使用者可以专注于开发应用程序而不是解决浏览器问题。

可扩展可测试

React DnD默认提供了HTML5拖放API封装，但它也允许您提供自定义的“后端(backend)”。您可以根据触摸事件，鼠标事件或其他内容创建自定义DnD后端。例如，内置的模拟后端允许您测试Node环境中组件的拖放交互。

为未来做好了准备

React DnD不会导出mixins，并且对任何组件同样有效，无论它们是使用ES6类，createReactClass还是其他React框架创建的。而且API支持了ES7 装饰器。

React DnD 的基本用法

下面是让一个现有的Card组件改造成可以拖动的代码示例：

// Let's make draggable!

import React, { Component } from 'react';import PropTypes from 'prop-types';import { DragSource } from 'react-dnd';import { ItemTypes } from './Constants';

/** * Implements the drag source contract. */const cardSource = { beginDrag(props) { return { text: props.text }; }};

/** * Specifies the props to inject into your component. */function collect(connect, monitor) { return { connectDragSource: connect.dragSource(), isDragging: monitor.isDragging() };}

const propTypes = { text: PropTypes.string.isRequired,

// Injected by React DnD: isDragging: PropTypes.bool.isRequired, connectDragSource: PropTypes.func.isRequired};

class Card extends Component { render() { const { isDragging, connectDragSource, text } = this.props; return connectDragSource(

{text}

); }}

Card.propTypes = propTypes;

// Export the wrapped component:export default DragSource(ItemTypes.CARD, cardSource, collect)(Card);

可以看出通过 DragSourc