「实战」纯React实现的拖拽组件

知乎原文：zhuanlan.zhihu.com/p/29608094

首先恭喜React可以“回归”开源世界，Facebook协议中夹带私货的做法实在是让人摸不着头脑。

随着FB宣布React将要更改协议（code.facebook.com/posts/30079…），那么就意味着之前我们的担心就不在了，另外，在新版本的React中加入了更强大的特性，让我们一起期待React 16吧！

造轮子学React

react作为一套工具，易用程度很高，我们可以用它做出很多牛逼的玩意。那么今天我就造了一个轮子。

「拖拽组件」作为每一个平台都有的组件，已经拥有各种各样的实现，今天我为大家带来的就是react版本的拖拽。

项目预览地址：GitHub & BitBucket HTML Preview（看不到的话多刷新几次，暂时不支持手机，后续版本加入）
项目仓库：215566435/React-dragger-R（如果喜欢，请不要吝啬手上的星星）

通过造这个轮子我们学到什么

react 的基本使用
如何监听用户的鼠标行为（addEventListener）
css盒子模型

对于css盒子模型的理解，在做这个项目中会得到淋漓尽致的体现，为什么呢？

当我们在设计「元素不能离开某个区域的api时」，对于css盒子模型必须要非常清楚。

一个元素的最外层是：margin
其次到：border
内填充：padding
宽度和高度：width & height

相信，通过这个轮子，大家一定会对css盒子模型有一个比较深入的理解，以及应用。

项目中使用？

当然可以，我已经把这玩意发到了npm上

npm install --save react-dragger-r

就可以安装了，使用也非常简单，直接使用<Dragger>包裹住现有元素即可

import React from 'react'
import Dragger from 'react-dragger-r'
import ReactDOM from 'react-dom'

class LayoutDemo extends React.Component {
    render() {
        return (
            <div>
                <Dragger style={{ left: 50 }}>
                    <div>普通的拖拽组件</div>
                </Dragger>
            </div>
        )
    }
}

ReactDOM.render(
    <div>
        <LayoutDemo />
    </div>,
    document.getElementById('root')
);

「实战」纯React实现的拖拽组件

造轮子学React

通过造这个轮子我们学到什么

项目中使用？

更多的文档？

更多轮子？