GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → Foveluy → Dragact

Foveluy / Dragact

Licence: mit
a dragger layout system with React style .

Programming Languages

typescript
32286 projects

Labels

reactreactjsgriddrag-and-dropdraggablegrid-layoutsortabledrag-dropgrid-system

Projects that are alternatives of or similar to Dragact

Sortable
Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework required.
Stars: ✭ 23,641 (+3229.72%)
Mutual labels:  drag-and-drop, draggable, sortable, drag-drop
Angular Grid Layout
Responsive grid with draggable and resizable items for Angular applications.
Stars: ✭ 163 (-77.04%)
Mutual labels:  grid, drag-and-drop, draggable, grid-layout
React Smooth Dnd
react wrapper components for smooth-dnd
Stars: ✭ 1,560 (+119.72%)
Mutual labels:  drag-and-drop, draggable, sortable, drag-drop
Grassy
Build layout through ASCII art in Sass (and more). No pre-built CSS. No additional markup.
Stars: ✭ 335 (-52.82%)
Mutual labels:  grid, grid-layout, grid-system
Cssgridgenerator
🧮 Generate basic CSS Grid code to make dynamic layouts!
Stars: ✭ 3,943 (+455.35%)
Mutual labels:  grid, grid-layout, grid-system
Muuri
Infinite responsive, sortable, filterable and draggable layouts
Stars: ✭ 9,797 (+1279.86%)
Mutual labels:  grid, drag-and-drop, draggable
Svgdragtree
一个可以通过拖放 SVG 图标，来生成拥有树状结构的视图与数据的前端组件。 SDT example:
Stars: ✭ 113 (-84.08%)
Mutual labels:  drag-and-drop, draggable, drag-drop
Tabulator
Interactive Tables and Data Grids for JavaScript
Stars: ✭ 4,329 (+509.72%)
Mutual labels:  grid, grid-layout, grid-system
React Awesome Styled Grid
A responsive 8-point grid system layout for React using styled-components
Stars: ✭ 157 (-77.89%)
Mutual labels:  grid, grid-layout, grid-system
Smooth Dnd
drag and drop library for javascript
Stars: ✭ 408 (-42.54%)
Mutual labels:  drag-and-drop, draggable, sortable
tb-grid
tb-grid is a super simple and lightweight 12 column responsive grid system utilizing css grid.
Stars: ✭ 19 (-97.32%)
Mutual labels:  grid, grid-layout, grid-system
React Sortable Hoc
A set of higher-order components to turn any list into an animated, accessible and touch-friendly sortable list✌️
Stars: ✭ 9,747 (+1272.82%)
Mutual labels:  grid, drag-and-drop, sortable
React Rasta
React Rasta is a powerful and flexible grid system for React
Stars: ✭ 88 (-87.61%)
Mutual labels:  grid, grid-layout, grid-system
grid-garden
Solutions to CSS Grid Garden
Stars: ✭ 79 (-88.87%)
Mutual labels:  grid, grid-layout, grid-system
vue-dnd-zone
vue.js plugin for drag and drop functionality
Stars: ✭ 144 (-79.72%)
Mutual labels:  drag-and-drop, sortable, draggable
Ngx Smooth Dnd
angular wrapper for smooth-dnd
Stars: ✭ 152 (-78.59%)
Mutual labels:  drag-and-drop, draggable, sortable
Lean Mean Drag And Drop
Drag&Drop Sorting and Reordering script for complex nested structures
Stars: ✭ 107 (-84.93%)
Mutual labels:  drag-and-drop, draggable, sortable
react-native-reseau
[WIP] An ios-like grid view based on react-native.
Stars: ✭ 13 (-98.17%)
Mutual labels:  grid, sortable, draggable
60gs
60GS - 60 Columns Grid System based on CSS Grid Layout
Stars: ✭ 65 (-90.85%)
Mutual labels:  grid, grid-layout, grid-system
dflex
The sophisticated Drag and Drop library you've been waiting for 🥳
Stars: ✭ 806 (+13.52%)
Mutual labels:  drag-and-drop, sortable, draggable
View All Similar Projects ➔

特别声明

由于本人正在忙其他的事情，dragact 已经暂停维护了。请不要使用 dragact（出了问题我实在没精力帮您解决，实在抱歉

最后，我推荐的替换是：

上述两个都是非常优秀的开源项目，请大家自行选择。

Dragact 👋

npm version npm downloads

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

Demo 地址 ✌️

Live Demo(预览地址)

特点

  • [x] 自动布局的网格系统
  • [x] 手机上也可以操作
  • [x] 高度自适应
  • [x] 静态组件
  • [x] 拖拽组件
  • [x] 自动缩放组件
  • [x] 自定义拖拽把手
  • [x] 自定义缩放把手
  • [x] 响应式布局

快速开始

官方文档

ChangeLog

v0.2.8

  • 版本跳跃
  • 添加增加 add/remove 布局
  • 新增记忆布局 demo
  • 更新 col,width,rowHeight 以后，会动态进行更新
  • [fix]修复更新数据视图内部不更新的 bug

v0.1.7

  • 优化性能-使用 reselect 的原理
  • 拖拽手感优化
  • 优化 dom 的层级
  • 自定义拖拽把手和 resize 把手
  • 拓展了 child 的渲染方式

v0.1.6

  • 修正 zIndex 的错误
  • 新增拖拽把手
  • 自由选择拖拽和 resize
  • 添加删除逻辑
  • 修改成 child 渲染方式
  • placeholder 选择

v0.1.3

  • 新增组件 api:getLayout，用于获取当前的 layout.
  • 新增组件的 resize

测试

git clone https://github.com/215566435/Dragact.git
cd Dragact
npm install
npm run test

贡献

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

  1. 如果你想添加一些新功能或者一些非常棒的点子，请发起 issue 告诉我，谢谢！
  2. 如果你已经阅读过源代码，并且添加了一些非常牛 X🐂 的点子，请发起你的 PR.

有 bug?

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

LICENSE

MIT

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].