React造轮子：拖拽排序组件「Dragact」

先来一张图看看：

项目地址：Github地址 (无耻求星！）

在线观看（第一次加载须要等几秒）：预览地址

提及来不容易，人在国外没有过年一说，可是毕竟也是中国年，虽然不放假，可是家里总会主内一顿丰盛的年夜饭。

说吧，人家在上班，我在家里过年，那确定就不一样步了。

不一样步会发生什么？

拖拽组件

大概三四个月之前，我写了一篇《「实战」React实现的拖拽组件》，只不过，这个组件比较基础，仅仅支持电脑端的使用，并且不能支持拖拽排序，显然不是很符合要求。

也尝试找了几款组件，想改吧改吧就上了，可是一些组件都蛮老的了，仍是jQ的，不是很符合咱们的技术栈。

想一想仍是算了，本身造一个轮子吧，反正我那么爱造轮子，顺手写一个也无所谓。

Typescript（TS）

最近一直在使用TS进行开发，Eggjs的Ts实践也写了一半。这玩意儿，真的是有毒的，由于能让你上瘾。

随便将一个项目迁移到TS之上，在强大的静态类型检测下，你就能轻松的发现一堆逻辑和边界错误。一番重构以后，顿时感受代码神清气爽，头皮恢复了生机！

因此，这款组件彻底是用Typescript进行开发，使得使用TS的小伙伴来讲，更加方便快捷。其次，若是你想使用Javascript开发，也是彻底没有问题的。

造轮子的一些思考

首先，咱们的需求是用户可以方便的调整后台dash board的各类表盘位置。

图片来自：https://github.com/yezihaohao/react-admin

相似一个这样的界面，咱们须要对其里面的组件进行各类各样的拖动（不得不说一句，他妈的，老子都作好了后台系统你就用就能够了，拖你妹啊，不让人好好吃年夜饭。）

那么首先，咱们就要考虑几个点：

• 技术栈是React
• 固定范围(Container)内的全部挂件不能超出这个范围。
• 每一个挂件能够设定大小，而且按必定的margin上下分割开。
• Container内的全部组件必须不能重叠，还要能自动排序
• 某些组件要能够设定静态的，也就是固定在那里，不被布局的任何变更而影响。
• 手机也能够操做

动手开始

得益于以前写过拖拽组件，避开了不少坑，也是写下这款组件，主要有得特色是：

• React组件
• 自动布局的网格系统
• 手机上也能够操做
• 高度自适应
• 静态组件(Live Demo(预览地址))
• 可拖拽的组件(Live Demo(预览地址))

终于在大年初二早上，弄完了这款组件，基本能够知足客户需求，然而还有一些TODO LIST：

• 水平交换模式，目前移动的时候不是
• 用户动态调整每一个挂件的大小，就像Windows窗口同样
• 挂件拖动把手
• 支持响应式
• 支持ssr，服务器渲染

如何开始？

npm install --save dragact

写一个例子

//index.js
import * as React from "react";
import * as ReactDOM from "react-dom";

import { Dragact } from 'dragact';
import './index.css'

ReactDOM.render(
    <Dragact
        col={8}
        width={800}
        margin={[5, 5]}
        rowHeight={40}
        className='plant-layout'
    >
        <div key={0} data-set={{ GridX: 0, GridY: 0, w: 4, h: 2 }} className='layout-child'>0</div>
        <div key={1} data-set={{ GridX: 0, GridY: 0, w: 1, h: 2 }} className='layout-child'>1</div>
        <div key={2} data-set={{ GridX: 0, GridY: 0, w: 3, h: 2 }} className='layout-child'>2</div>
    </Dragact>,
    document.getElementById('root')
);

加点css

/** index.css */
.plant-layout {
    border: 1px solid black;
}
.layout-child {
    height: 100%;
    background: #ef4;
    display: flex;
    justify-content: center;
    align-items: center;
}

想要一个新的特点、功能？

若是你想添加一些新功能或者一些很是棒的点子，请发起issue告诉我，谢谢！
若是你已经阅读过源代码，而且添加了一些很是牛X?的点子，请发起你的PR.

有bug?

若是你发现了本项目的Bug，请务必立刻告诉我。添加一个issue，而且帮忙给出最最简单重现的例子，这能让我快速定位到Bug帮你解决，谢谢！

最后

这是2018年的第二个轮子了。

造轮子训练的能力固然不是只有把轮子从新写一遍的能力，还有一个很重要的因素就是：心态。

为何我说的是心态呢？我举一个生活中的例子，你去新买一台iPhone，假设之前根本没有用过iPhone，买到手的时候，确定会当心翼翼的去使用其中的功能，基本上就是这个不敢设置，另一个不敢设置，这个不敢按，那个不敢碰。可是随着时间久了，你熟悉了iPhone，每一个角落都被你玩透了，你就不在意了，随便玩，随便调，厉害的刷机越狱改主题。

这就是心态的变化，应用到编程之中也是如此。刚开始的时候，你拿到别人框架来用，很是的不熟练，跟着做者写的案例，设置成功，解决了你的问题，你就不敢再碰那一段代码了。随后，新的需求来了，你必需要在原有的基础上加新功能，然而做者这时候由于某些缘由再也不维护那个软件了，你要么找新的，要么就是深刻看代码。

刚开始的时候，你可能只是调整框架代码里面的参数，随着愈来愈的需求，你改的愈来愈多，这个框架你开始熟悉，逐渐逐渐的，你就压根不怕需求来了，由于你太熟悉了。

这个过程至关的漫长，聪明的人几个月，比较笨的人或者懒惰的人，可能10年。为了快速得到这种心态的转变，你要作的就是「造轮子」。这是一个最快的办法，也是最土最笨的办法，可是确实是一个「必须有效的办法」。