React Draggable 实现拖拽 - 最详细中文教程 - 卡拉云

本文首发：《React Draggable 实现拖拽 - 最详细中文教程 - 卡拉云》

React Draggable 是 react 生态中，最好用的拖拽实现库之一。如果你的应用中需要实现拖拽功能，可以尝试用 react-draggable，它可以满足多数情况下的拖拽需求，比如一个弹出设置浮窗，可以相互遮挡的容器之类。在所有 react 拖拽库里(即 react dnd, drag and drop)，react-draggable 算是把功能性和易用性平衡得最好的拖拽库了。

在实现卡拉云时，我们也大量使用了 react-draggable。所以这篇文章里，我们介绍如何使用 react-draggable，一些常见的设置和我们的经验。请根据下面的代码一步步实现，最终你要实现的效果如下

如果你在参考的过程中有不确定代码应该怎么写，可以直接到代码库中找到对应的文件。本文可参考的代码放在 github 上: react-draggable代码，觉得不错的话不妨打个星。

react-draggable 简介

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