如何用react实现对元素的托拉移动

react-draggable 简介
react-draggable 经过几年的发展，已经是一个相对比较稳定的库了。从 npm trends 上看，从 16 年起它的流行程度就迅速超过了其它几个类似的项目。它在 github 上算非常热门的项目了，使用它的项目众多，所以可以放心地使用。如果有 bug 反馈也会非常快

如果看它的源码的话，会发现它的原理其实很简单，它只是将一个需要被拖拽的组件包到它定义的一个组件中，当鼠标拖拽时，重新计算组件的位置，这样就实现了“拖拽”的效果。这也是绝大多数拖拽组件库的实现方式。

安装 react-draggable

现在执行 npm install react-draggable，执行完后应该在你的 node_modules 中就装好了 react-draggable。

以下就是最简单得代码实现元素拖拽

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

class LayoutDemo extends React.Component {
    render() {
        return (
            <div>
                <Dragger >
                    <div>普通的拖拽组件</div>
                </Dragger>
            </div>
        )
    }
}
ReactDOM.render(
    <div>
        <LayoutDemo />
    </div>,
    document.getElementById('root')
);