a dragger layout system with React style .

Overview

特别声明

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

最后,我推荐的替换是:

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

Dragact 👋

npm version npm downloads

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

Demo 地址 ✌️

Live Demo(预览地址)

特点

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

快速开始

官方文档

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

Comments
  • 在dragend事件中修改layout的问题

    在dragend事件中修改layout的问题

    想做一个拖拽merge两个子组件的东西,所以需要在dragend中修改layout。

    假设拖拽A到B内,生成一个merge后的B。无非是移除layout 中的A,以及修改layout中的B。

    这个时候存在两个问题: 1、react报一个在unmount的组件上调用setstate的警告 2、此后getLayout api拿到的layout中B的信息是就旧的

    opened by FailLone 14
  • Add a debouncer mechanism to prevent start dragging until mouse moves 10 pixels at least while mousedown is active

    Add a debouncer mechanism to prevent start dragging until mouse moves 10 pixels at least while mousedown is active

    This is an example of how it can be done. Most probably, you'll want to create intermediate functions instead of repeating code, as I have done.

    Fix #34 and -probably- #38 .

    opened by emibcn 2
  • 有没有dragOver事件

    有没有dragOver事件

    我看到api中没有dragOver事件,现在有一种需求就是跟手机桌面app一样,有一些应用和大小不一的小部件,不想拖拽排版,这个插件可以满足,但是手机桌面还有一种是应用之间拖拽可以创建文件夹。 -------------------- 看了下until里面的源码和React-Grid-Layout的源码,发现原来用的是碰撞检测。

    opened by SunXinFei 2
  • Dragact嵌套图片问题

    Dragact嵌套图片问题

    Dragact嵌套图片,图片宽高是100%,点击图片拖拽就出现BUG了 <Dragact className="plant-layout" //必填项 col={16} //必填项 layout={fakeData} //必填项 margin={[5, 5]} //必填项 placeholder //必填项 rowHeight={300} //必填项 style={{ background: '#333' }} //非必填项 width={800} > {(item, provided) => ( <div {...provided.props} {...provided.dragHandle} style={{ ...provided.props.style, ...getblockStyle(provided.isDragging), }} > {/*provided.isDragging ? '正在抓取' : '停放'*/} <img alt="" src="https://img.alicdn.com/imgextra/i3/1928865133/O1CN011nmxSUvVK566HsW_!!1928865133.jpg" style={{ width: "50px", height: "50px", }} /> </div> )} </Dragact>

    opened by netbuggang 1
  • babelrc 的一点点小建议

    babelrc 的一点点小建议

    1. 似乎 babel-preset-es2015 是一个比较过期的解决方案,也许可以考虑 babel-preset-env 2.似乎可以考虑在默认的情况下不添加 react-hot-loader, transform-runtime,把这两个放在 test 和 webpack 两个 env 似乎比较适合;因为这两个会在 prod 的 bundle 中加入一些不必要的东西

    下个月我可能会研究一下 rollup + ts 然后过来提 pr

    opened by zhujinxuan 1
  • 内部组件的点击事件无法使用,另外在其他容器内包含Dragact 会报warning

    内部组件的点击事件无法使用,另外在其他容器内包含Dragact 会报warning

    内部组件的点击事件无法响应,另外在其他容器内包含Dragact 会报warning

    index.js:1452 Warning: Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.

    opened by qq459673705 0
  • ts接口定义

    ts接口定义

    <Dragact col={8} width={800} margin={[5, 5]} rowHeight={40} className='plant-layout' >报错 node_modules/dragact/src/lib/dragger/index.tsx (377,17): Type 'string | number' is not assignable to type 'number'. Type 'string' is not assignable to type 'number'. 是因为ts有一些接口定义不对么

    opened by lyxverycool 0
  • 报错了

    报错了

    main.js?1552287600v47:39477 Uncaught TypeError: (0 , _typeof4.default) is not a function 这一行 var _typeof = typeof _symbol2.default === "function" && (0, _typeof4.default)(_iterator2.default) === "symbol" ? function (obj) {

    opened by laengyog 0
  • 当子项足够大时无法缩小

    当子项足够大时无法缩小

    拖动改变尺寸时,会有一个阴影,表示最终的大小,发现当子项尺寸很大时,阴影的尺寸也很大,就无法缩小了,是否能定义阴影的大小? 录了屏,我拖动后往上缩,但是最终还是向下变大了 http://ifun.oss-cn-hangzhou.aliyuncs.com/tmp/%E5%B1%8F%E5%B9%95%E5%BD%95%E5%88%B6%202019-01-07%20%E4%B8%8B%E5%8D%884.32.52.mov

    opened by weihomechen 0
Releases(0.1.8)
Owner
ZhengFang
头像是我,不要给我发邮件问我如何练的。
ZhengFang
React drag and drop sort support flex layout and nested.

react-flex-dnd React drag and drop sort support flex layout and nested. This package using hooks, note that your React version is above 16.8 :) Why fl

lvshihao 7 Nov 14, 2022
Beautiful and accessible drag and drop for lists with React

react-beautiful-dnd (rbd) Beautiful and accessible drag and drop for lists with React Play with this example if you want! Core characteristics Beautif

Atlassian 28.9k Dec 31, 2022
Drag and Drop for React

React DnD Drag and Drop for React. See the docs, tutorials and examples on the website: http://react-dnd.github.io/react-dnd/ See the changelog on the

React DnD 18.7k Jan 7, 2023
React draggable component

React-Draggable A simple component for making elements draggable. <Draggable> <div>I can now be moved around!</div> </Draggable> Demo Changelog Vers

Samuel Reed 8.1k Jan 1, 2023
Simple HTML5 drag-drop zone with React.js.

react-dropzone Simple React hook to create a HTML5-compliant drag'n'drop zone for files. Documentation and examples at https://react-dropzone.js.org.

null 9.4k Jan 2, 2023
🔀 Drag and drop for your React lists and tables. Accessible. Tiny.

react-movable See all the other examples and their source code! Installation yarn add react-movable Usage import * as React from 'react'; import { Li

Vojtech Miksu 1.3k Dec 30, 2022
:sparkles: A sortable and resizable pane component for React.

Sortable and resizable pane component for react. Table of Contents Screenshot Live Demo Storybook CodeSandbox Install Usage uncontrolled controlled Pr

bokuweb 616 Dec 19, 2022
Unopinionated dropdown component for react.

Unopinionated dropdown component for react.

Akinwunmi Aguda 7 Jul 11, 2022
React draggable component

A simple component for making elements draggable.

RGL 8.1k Jan 8, 2023
Drag and Drop for React

React DnD Drag and Drop for React. See the docs, tutorials and examples on the website: http://react-dnd.github.io/react-dnd/ See the changelog on the

React DnD 18.7k Jan 6, 2023
A modern, lightweight, performant, accessible and extensible drag & drop toolkit for React.

A modern, lightweight, performant, accessible and extensible drag & drop toolkit for React.

Claudéric Demers 6.5k Jan 7, 2023
Drag and Drop for React

Drag and Drop for React

React DnD 18.7k Jan 4, 2023
Draggable and Resizable component running at 60FPS using React Native Reanimated v2

reanimated-drag-resize Draggable and Resizable React Native Component running at 60FPS using React Native Reanimated v2 Main Dependencies react-native

Fateh Farooqui 39 Dec 28, 2022
React component to create graphic user interface with: - draggable nodes with ports and edges on a directed graph editor. - extensibility to customize the widgets or behaviors. - accessbility and testability support

Work in progress react-flow-editor Overview React component to create graphic user interface with: draggable nodes with ports and edges on a directed

Microsoft 102 Dec 29, 2022
Light React Drag & Drop files and images library styled by styled-components

Light React Drag & Drop files and images library styled by styled-components

null 143 Dec 28, 2022
React Drag and Drop file input

React Drag and Drop file input

Tran Anh Tuat 45 Dec 30, 2022
An add-on backend for `react-dnd` that provides support for keyboards and screenreaders by default.

An add-on backend for `react-dnd` that provides support for keyboards and screenreaders by default.

Discord 569 Dec 31, 2022
React component for a list of draggable collapsible items

react-draggable-list This component lets you make a user re-orderable list that animates nicely so that the user can easily move large items: The abov

Streak 282 Dec 16, 2022
A simple draggable list component for React

react-drag-listview React drag list component. install Example Drag Rows Simple dragging demo Dragging Ant-Design table Dragging Ant-Design table widt

浅搁 224 Oct 9, 2022