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

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

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


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


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


造轮子学React

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


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



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


  • 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



文章分类
前端