「實戰」純React實現的拖拽元件

小雅發表於2017-09-23
React元件
知乎原文：zhuanlan.zhihu.com/p/29608094


首先恭喜React可以“迴歸”開源世界，Facebook協議中夾帶私貨的做法實在是讓人摸不著頭腦。


隨著FB宣佈React將要更改協議（https://code.facebook.com/posts/300798627056246/relicensing-react-jest-flow-and-immutable-js/），那麼就意味著之前我們的擔心就不在了，另外，在新版本的React中加入了更強大的特性，讓我們一起期待React 16吧！


造輪子學React

react作為一套工具，易用程度很高，我們可以用它做出很多牛逼的玩意。那麼今天我就造了一個輪子。


「拖拽元件」作為每一個平臺都有的元件，已經擁有各種各樣的實現，今天我為大家帶來的就是react版本的拖拽。



通過造這個輪子我們學到什麼


  • react 的基本使用
  • 如何監聽使用者的滑鼠行為（addEventListener）
  • css盒子模型

「實戰」純React實現的拖拽元件

對於css盒子模型的理解，在做這個專案中會得到淋漓盡致的體現，為什麼呢？

「實戰」純React實現的拖拽元件

當我們在設計「元素不能離開某個區域的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



相關文章