需要做一个可随意拖动的浮窗的需求

React-dnd（16.9k）

很强大的组件库，但比较原始，没有过多的封装，用起来很复杂

  • 拖拽后修改dragSource的位置需要自己写

但有问题：

  • 拖拽过程中css更改：本来被拖拽的浮窗是圆角，但在拖拽过程中border-radius会失效
  • 需要限制可拖拽的范围：设置的dropTarget为整个屏幕，会拖拽到dropTarget范围外
  • dropTarget覆盖全部窗口：dropTarget为整个屏幕时，为了保持浮窗在最上层，需要z-index设置很高，导致其他部分的交互事件都不可用了

React-beautiful-dnd（25.9k）

用于列表的拖拽，其他的场景不可用

React-rnd（2.6k）

可以resize、可拖拽的组件

  • 非常好用，封装的非常完善
  • 可以在全屏中移动，不会出屏幕外
  • 不会覆盖其他的部分
  • 拖拽时css不修改，很优雅

源码
在react-draggable上封装的一层（我笑死。。。）

React-draggable（7.2k）

也好用，反正都比dnd好用
源码
在自组件上添加style，通过transform属性移动 transform: translate(-30px, 24px); ，onMouseDown开始移动，不断计算位置信息，onMouseUp结束