First take a look at a map:
Project Address: Github Address (shameless seek Star!)
Online viewing (for the first time need to wait a few seconds to load): Preview Address
Speaking is not easy, people do not say the New Year in a foreign country, but after all, is in China, though not a holiday, but in the main house will always be a sumptuous dinner.
Well, people at work, my New Year at home, it is certainly not synchronized.
What will happen is not synchronized?
Drag and drop components
Probably three or four months ago, I wrote a "drag and drop components" real "React to achieve" , but, this component basis for comparison, only supports the use of a computer terminal, and can not support drag and drop sorting, obviously not very satisfactory .
Also try to find several components, I would like to change it to change it on the last, but some components Duman old, or jQ, not very consistent with our technology stack.
Think about or forget that he made a wheel, anyway, I'm so in love-create the wheel, pulled a write does not matter.
Typescript（TS）
Has recently been developed using TS, Ts practice Eggjs also wrote half. This stuff really is toxic, because make you addicted.
Just a project to migrate onto TS, under strong static type checking, you can easily find a bunch of logic and boundary errors. After some remodeling, suddenly feeling refreshed codes, scalp back to life!
Therefore, this component is entirely carried out with Typescript development, making use TS junior partner, the faster and more convenient. Secondly, if you want to use Javascript development, is no problem.
Some thought made wheels
First, we demand that the user can easily adjust the background dash board of a variety of dial position.
Photo: https: //github.com/yezihaohao/react-admin
One such interface is similar, we need to drag it inside the various components ( have to say, fuck, I have done the back-end system you use it, drag your sister ah, good people do not eat dinner. )
So first, we have to consider a few points:
- Technology stack is 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年。为了快速获得这种心态的转变，你要做的就是「造轮子」。这是一个最快的办法，也是最土最笨的办法，但是确实是一个「必须有效的办法」。