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

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

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

造轮子学React

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

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

• 项目预览地址：GitHub & BitBucket HTML Preview（看不到的话多刷新几次，暂时不支持手机，后续版本加入）

• 项目仓库：215566435/React-dragger-R（如果喜欢，请不要吝啬手上的星星）

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

• react 的基本使用

• 如何监听用户的鼠标行为（addEventListener）

• css盒子模型

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

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

1. 一个元素的最外层是：margin

2. 其次到：border

3. 内填充：padding

4. 宽度和高度：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')
);

更多的文档？

文档：215566435/React-dragger-R

所有对外属性（props）都在上面了

另外，所有注释都是中文的，欢迎查看源码学习，希望对你的学习有帮助

更多轮子？

• 一个酷炫的react简历模版：预览地址

• 仓库地址：215566435/React-awesome-resume