Dragact 是一款React组件，他能够使你简单、快速的构建出一款强大的 拖拽式网格(grid)布局.

仓库地址：Dragact

经过几天的迭代时间Dragact已经能够支持自由缩放功能了(resize)

废话不多说，来看看demo

新特性1：大小自由缩放

自由缩放大小的布局

新特性2：getLayout获取当前的布局信息

在live Demo中，我新增了第四个demo

点击以后，可以看到一个布局，这个布局拥有存储能力，也就是当你刷新浏览器以后，他的布局效果不会消失，无论是位置，还是图片大小。

下个版本

在下个版本中，我会对其进行支持

  • 响应式
  • 自由切换拖拽和缩放
  • 手机也能操作

仓库地址：Dragact

预览：live Demo

多谢大家支持。

React组件：Dragact 0.1.4发布的更多相关文章

  1. React Suite v3.0 正式版发布

    React Suite v3.0 正式版发布 相信很多人会好奇,React Suite 是什么? React Suite 是 HYPERS 前端团队和 UX 团队开源的一套基于 React 的 UI ...

  2. 使用dumi生成react组件库文档并发布到github pages

    周末两天玩了下号称西湖区东半球最牛逼的react文档站点生成工具dumi,顺带结合github pages生成了react-uni-comps文档站, 一套弄下来,感觉真香,现在还只是浅尝,高级的特性 ...

  3. 从0开始用webpack开发antd,react组件库npm包并发布

    一.初始化一个npm包 1.新建一个文件夹(名称随意,建议和报名一致),输入命令 :npm init -y 会自动生成一个包的说明文件 package.json如下(本文以scroll-antd-ta ...

  4. React组件：拖拽布局Dragact v0.1.6 发布

    仓库地址:Dragact爽滑的拖拽组件 大家好,新年已经过去,大家又投入了繁忙的工作当中,由于我在国外,因此压根儿没有休息... 少说废话,上周一周的时间里,我陆陆续续的为Dragact组件进行了一系 ...

  5. React 16.3.0 发布，构建用户界面的 JavaScript 库

    React 16.3.0 已发布,React 是 Facebook 推出的一个为数据提供渲染为 HTML 视图,用来构建用户界面的开源 JavaScript 库. React 视图通常采用包含以自定义 ...

  6. React拖拽组件Dragact V0.1.7：教你优化React组件性能与手感

    仓库地址:Dragact手感丝滑的拖拽布局组件 预览地址:支持手机端噢- 上回我们说到,Dragact组件已经进行了一系列的性能优化,然而面对大量数据的时候,依旧比较吃力,让我们来看看,优化之前的Dr ...

  7. React Router 4.0 + webpack 实现组件按需加载

    网上关于React Router 4.0的按需加载文章有很多,大致的思路都一样,但是其实具体实现起来却要根据自己的实际情况来定,这里主要介绍一下我的实现方式. 主要方式是通过Route组件的rende ...

  8. 使用reflux进行react组件之间的通信

    前言 组件之间为什么要通信?因为有依赖. 那么,作为React组件,怎么通信? React官网说, 进行 父-子 通信,可以直接pass props. 进行 子-父 通信,往父组件传给子组件的函数注入 ...

  9. 从性能角度看react组件拆分的重要性

    React是一个UI层面的库,它采用虚拟DOM技术减少Javascript与真正DOM的交互,提升了前端性能:采用单向数据流机制,父组件通过props将数据传递给子组件,这样让数据流向一目了然.一旦组 ...

随机推荐

  1. 使用zookeeper作为分布式锁以及设计一种通知监听模式

    1.创建实例/** * 初始化单例的便捷方法 */ public static void init() { getInstance(); } /** * 获取单例 * @return */ publi ...

  2. 【Python】【demo实验18】【练习实例】【统计输入字符串中，数字的个数、英文字母的个数及其他符号的个数】

    原题: 输入一行字符,分别统计出其中英文字母.空格.数字和其它字符的个数. (本题暂时不支持中文字符及汉字) 我的代码: #!/usr/bin/python # encoding=utf-8 # -* ...

  3. 【LOJ】#3014. 「JOI 2019 Final」独特的城市（长链剖分）

    LOJ#3014. 「JOI 2019 Final」独特的城市(长链剖分) 显然我们画一条直径,容易发现被统计的只可能是直径某个距离较远的端点到这个点的路径上的值 用一个栈统计可以被统计的点,然后我们 ...

  4. C++中的bool类型

    1.C++中的布尔类型 (1)C++在C语言的基础类型系统之上增加了bool: 1)C语言中,没有bool类型存在,往往都是用整型代替bool类型,常用0表示假,1表示真: 2)bool本来就有这样的 ...

  5. C语言 --- 初级指针

    1.内存的访问:直接访问,间接访问.     直接访问:int a = 0;直接对a赋值.选一个内存地址,让他存20这个数.                  a += 10;             ...

  6. 题解 P3627 【[APIO2009]抢掠计划】

    咕了四个小时整整一晚上 P3627 [APIO2009] 抢掠计划(https://www.luogu.org/problemnew/show/P3627) 不难看出答案即为该有向图的最长链长度(允许 ...

  7. Elasticsearch5.x安装及常见错误的解决方法

    Elasticsearch是基于java开发的,机器上必须要先java环境,elasticsearch5.x建议用jdk8的最新版本.下面介绍elasticsearch5.x的安装步骤: 一.安装El ...

  8. python基础知识0-3

    一.根据用户输入内容输出其权限 # 根据用户输入内容打印其权限    # FYT --> 超级管理员 # eric --> 普通管理员 # tony,rain --> 业务主管 # ...

  9. 北电之死：谁谋杀了华为的对手？——银湖资本（Silver Lake）董事总经理爱德华·詹德出任CEO，既不了解华为，也不重视中国，直截了当地否决了收购华为

    作者:戴老板:微信公众号:饭统戴老板(ID: worldofboss) 2003年5月,北京SARS疫情紧张,摩托罗拉集团总裁迈克·扎菲罗夫斯基(Mike Zafirovski)却准备不走寻常路,决定 ...

  10. [C#.net]xlApp.Workbooks.Open打开无法远程访问

    上月还能使用的xlApp.Workbooks.Open,这个月报无法远程访问,搞了半天,才找到原因是Foxit PDF 的Execl插件搞的鬼,记录下 Excel.Workbooks wbChecks ...