- 综合排序
- 最热优先
- 最新优先
- 来自专栏采云轩
react-grid-layout 之核心代码分析与实践
使用 下载 npm 包 npm install react-grid-layout 引入 RGL（react-grid-layout） import GridLayout from "react-grid-layout 总结 通过对 React-grid-layout 源码的学习，我们对它的使用也会更得心应手，这篇文章主要对组件元素的定位、拖拽、缩放功能的源码实现做了详细的介绍。 参考文献 https://github.com/react-grid-layout/react-grid-layout https://developer.mozilla.org/zh-CN/docs/
4.4K30编辑于 2023-10-16 - 来自专栏有困难要上，没有困难创造困难也要上！
React拖拽组件react-grid-layout实现表单设计
最近在看在线表单设计，找了一些现成的产品和库，今天就看看怎样使用 React-Grid-Layout 实现表单设计。 React-Grid-Layout是一个基于 react 的网格布局系统，可实现基于表格的拖拽功能。 创建工程 npx create-react-app myapp 安装依赖库 npm install react-grid-layout 另外例子还使用了boostrap做渲染，因此还需要安装 boostrap unselectable="on" onDragStart={onDragStartForDraggable}> Input </Button> 右边是个布局区域，可以在上面拖拽摆放控件位置，使用 react-grid-layout /App.css'; import "bootstrap/dist/css/bootstrap.min.css"; import "react-grid-layout/css/styles.css";
1.4K10编辑于 2024-04-04 - 来自专栏趣谈前端
整理了12款开源拖拽库, 轻松上手可视化搭建
React-Grid-Layout 「React-Grid-Layout」 可以让我们轻松构建智能网格布局的拖放界面, 我们可以基于react的动态组件实现非常有意思搭建平台. 「github:」 https://github.com/react-grid-layout/react-grid-layout 10. Dragable 动画性能优秀的网格+列表拖拽库。
4.6K20编辑于 2024-06-06 - 来自专栏前端精读评论
精读《磁贴布局 - 功能分析》
因为需要做自由布局与磁贴布局混排，以及磁贴布局嵌套，所以要实现一套磁贴分析功能，所以本系列不是简单的介绍使用 react-grid-layout 这个库就行了，而是深入分析磁贴布局的特性，以及重头实现一遍 对磁贴布局不熟悉的话，react-grid-layout 也是个很好的 Demo 体验页，大家可以先体验一下再阅读文章。 C ] [-----] [-----] [-----] | C | [-----] 这时候你可能会想，结果不就是 B 和 A 交换了位置嘛，实际上用 react-grid-layout
90140编辑于 2023-02-14 - 来自专栏Czy‘s Blog
基于NoCode构建简历编辑器
这个网格的页面布局实际上就是作为整个页面布局的画布来实现，React的生态有很多这方面的库，我使用了react-grid-layout这个库来实现拖拽，具体使用的话可以在本文的参考部分找到其Github ://juejin.cn/post/6961309077162950692 https://github.com/WindrunnerMax/DocEditor https://github.com/react-grid-layout /react-grid-layout
95230编辑于 2022-09-16 - 来自专栏GEE数据专栏，GEE学习专栏，GEE错误集等专栏
Python应用开发——30天学习Streamlit Python包进行APP的构建（4）
= Path("data.json").read_text() # 定义默认的仪表盘布局 # 默认情况下仪表盘会分为 12 列 # # 更多可用参数见： # https://github.com/react-grid-layout 定义了仪表盘中可拖拽的部分 # 以下为将带 'draggable' 类名的元素变为可拖拽对象 # # 更多仪表盘网格相关的可用参数请见： # https://github.com/react-grid-layout /react-grid-layout#grid-layout-props # https://github.com/react-grid-layout/react-grid-layout#responsive-grid-layout-props
1.6K10编辑于 2024-05-31 - 来自专栏趣谈前端
做了N+1个企业项目之后, 我总结了这些React必备插件
react-beautiful-dnd 漂亮,可移植性 列表拖拽库 react-dnd 可帮助我们构建复杂的拖放界面，同时保持组件的分离 react-moveable 支持自由拖拽, 缩放, 参考线的灵活强大的拖拽库 react-grid-layout
2.5K10发布于 2021-02-05 - 来自专栏前端达人
20个惊艳的React组件库，每一个都值得收藏（上）
开始使用 要开始使用React Grid Layout，你可以通过npm或yarn直接安装到你的项目中： npm install react-grid-layout # 或者 yarn add react-grid-layout https://github.com/react-grid-layout/react-grid-layout 2、React Beautiful DND：让拖拽体验更加美观流畅 在现代网页设计中，拖拽功能不仅仅是一种交互方式
2.9K12编辑于 2024-03-02 - 来自专栏web秀
React组件总结——难道还没有你喜欢的组件吗？
react-markdown-editor UI布局 rgx react-flexbox react-masonry-mixin react-inline-grid react-layout-components react-grid-layout
2.1K30发布于 2019-09-04 - 来自专栏vivo互联网技术
从0到1设计通用数据大屏搭建平台
可视化框架：Echarts\DataV-React (封装度高，json结构的配置项易拓展) D3.js（可视化元素粒度小、定制能力强）拖拽插件：dnd-kit （满足树状结构视图的跨组件拖拽）布局插件：React-Grid-Layout 3、拖拽器实现背景：React-Grid-Layout 拖拽插件不支持自由布局和组件不同纬度拖拽：解决方案：通过分析源码，对不同纬度的拖拽事件以及拖拽目标碰撞事件进行了重写，并且也拓展了锁定宽高比、旋转透明度等功能
4.1K40编辑于 2022-10-17 - 来自专栏趣谈前端
可视化搭建平台的地图组件和日历组件方案选型
在 H5-dooring 创建的初期主要考虑的方向是用户使用的便捷性, 即最大程度的降低用户操作成本, 所以采用了智能布局, 也就是react-grid-layout这个库, 之前考虑过完全的自由布局,
2.1K20发布于 2021-01-06 - 来自专栏Cell的前端专栏
拖拽式仪表盘系列总结
一步步完善每个小功能的过程中，也写下了几篇前驱文章： CSS 实现网格背景效果 在 Vue 项目中更优雅地使用 icon 封装 Vue FullScreenToggler 组件 另外，我还收集了一些拖拽式相关的库： react-grid-layout
67320编辑于 2023-10-19 - 来自专栏趣谈前端
如何实现H5可视化编辑器的实时预览和真机扫码预览功能
至于render engine部分, 我们只需要使用react-grid-layout提供的数据供给方案即可.代码如下: <GridLayout className={styles.layout}
2.2K20发布于 2020-09-28 - 来自专栏趣谈前端
推荐!ant-simple-pro2.0正式发布，助力vue3社区
vue3-grid-layout vue3-grid-layout借鉴了vue-grid-layout，react-grid-layout这两个库，并且我们在vue-grid-layout的基础上，全部用
1.3K10发布于 2021-07-12 - 来自专栏专知
【书籍】深度学习框架：PyTorch入门与实践（附代码）
文件被防火墙给阻挡了： https://cdn.rawgit.com/plotly/plotly.js/master/dist/plotly.min.js https://cdn.rawgit.com/STRML/react-grid-layout
4.5K60发布于 2018-04-12 - , (document as any).querySelector('.react-grid-layout来自专栏趣谈前端
如何设计可视化搭建平台的组件商店？
bgColor, top: (top + 6) + 'px'}}> H5-Dooring
1.3K20编辑于 2022-02-09
总结100+前端优质库,让你成为前端百事通
react-beautiful-dnd 漂亮,可移植性 列表拖拽库 react-dnd 可帮助我们构建复杂的拖放界面，同时保持组件的分离 react-moveable 支持自由拖拽, 缩放, 参考线的灵活强大的拖拽库 react-grid-layout
复盘!如何设计可视化搭建平台的组件商店？
bgColor, top: (top + 6) + 'px'}}> H5-Dooring
GitHub 上100个优质前端项目整理，非常全面！
view ● react-loadable react组件懒加载组件 star: 9932 ● react-dnd react拖拽组件，满足各种拖拽需求 star: 9218 view ● react-grid-layout
收藏夹吃灰了：GitHub 上值得收藏的100个精选前端项目
star: 14180 view react-loadable react组件懒加载组件 star: 9932 react-dnd react拖拽组件，满足各种拖拽需求 star: 9218 view react-grid-layout
