先来看一张图：项目地址：Github地址（无耻求星！）在线查看（第一次加载需要几秒）:预览地址Let'stalk这并不容易。国外没有过年，但毕竟也是过年。虽然没有假期，但家里总会有一顿丰盛的年夜饭。这么说吧，人家上班，我在家过年，肯定不同步。如果不同步会怎样？大约三四个月前，我写了一篇关于《「实战」React实现的拖拽组件》的文章。但是这个组件比较基础，只支持电脑端使用，不能支持拖拽排序，显然不符合要求。我也试图找到一些组件。想改就改，但是有些组件比较老，还是jQ的，不是很适合我们的技术栈。想想还是算了，自己造个轮子吧，反正我这么爱造轮子，手写一个也无所谓。Typescript（TS）最近一直在用TS开发，Eggjs的Ts实践写了一半。这东西真的有毒，因为它会让你上瘾。随便把一个项目迁移到TS，在强大的静态类型检测下，很容易就能发现一堆逻辑错误和边界错误。一番重构后，顿时感觉代码清爽了，头皮又活了过来！因此本组件完全使用Typescript开发，让使用TS的小伙伴使用起来更加方便快捷。其次，如果你想用Javascript开发，完全没有问题。做轮子的一些思考首先我们的需求是用户可以方便的在后台仪表盘上调整各种表盘的位置。图片来自：https://github.com/yezihaohao/react-admin类似这样的界面，我们需要在里面拖各种组件（不得不说，卧槽，我都搞定了嘛，你随便用后台系统，拖着你妹，不让人家吃好年夜饭。）那么首先，我们要考虑几点：技术栈是React(Container)固定范围内的所有挂件，不能超过这个范围。可以设置每个widget的大小，按照一定的边距上下分割。Container中的所有组件不得重叠，并且某些组件必须能够自动排序。有些组件必须是静态的，即固定在那里，不会受到布局的任何变化的影响。手机也可以操作。得益于之前写的拖放组件，避免了很多坑。我也写了这个组件。主要特点是：React组件自动布局的网格系统也可以在手机端操作，自动化程度高。适配静态组件（LiveDemo（预览地址））和可拖拽组件（LiveDemo（预览地址））终于在大年初二早上完成了这个组件，基本可以满足客户需求，但是还有一些TODOLIST：水平交换模式。目前，用户在移动时不会动态调整每个widget的大小。就像Windows窗口一样，widget拖动手柄支持响应式，支持ssr。服务器渲染是如何启动的？npminstall--savedragact写一个例子ReactDOM.render(
