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. phpstorm设置的快捷键突然失效了，提示： IdeaVim ...

    下班后,打开PHPstorm,突然感觉不对,经常用的快捷键突然用不了. 例如按了 Ctrl+F 快捷键后,提示:  IdeaVim! Using the Ctrl+F shortcut for Vim ...

  2. mongo fork

    logpath=../log/mongodb.log logappend=false dbpath=/hejing/data/db fork=true

  3. 如何禁止谷歌浏览器隐藏url的www前缀

    若要将Chrome浏览器的设置恢复为隐藏HTTP.HTTPS以及WWW前缀,则只需再次进入此页面: chrome://flags/#omnibox-ui-hide-steady-state-url-s ...

  4. 结束占用端口号进程(pid)

  5. Spring Boot常用的注解以及含义<持续更新>

    1.@RestController和@RequestMapping注解 @RestController 和 @RequestMapping 注解是Spring MVC注解(它们不是Spring Boo ...

  6. 洛谷P2622 关灯问题II （二进制枚举+bfs

    题目描述 现有n盏灯,以及m个按钮.每个按钮可以同时控制这n盏灯——按下了第i个按钮,对于所有的灯都有一个效果.按下i按钮对于第j盏灯,是下面3中效果之一:如果a[i][j]为1,那么当这盏灯开了的时 ...

  7. django时区与时间差的问题

    时区的正确配置方式: # 这里还可以配置成中文 一般用不到 LANGUAGE_CODE = 'en-us' # TIME_ZONE = 'UTC' TIME_ZONE = 'Asia/Shanghai ...

  8. 怎样理解 DOCTYPE 声明

    1. HTML 4.01 Strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www. ...

  9. nginx之配置

    1)反向代理(Reverse Proxy)方式是指以代理服务器来接受internet上的连接请求,然后将请求转发给内部网络上的服务器,并将从服务器上得到的结果返回给internet上请求连接的客户端, ...

  10. js 前端请求头里传 token

    参考:https://blog.csdn.net/qq_34309704/article/details/80572077 1.Token:token是客户端频繁向服务器端请求数据,服务器频繁的去数据 ...