foveluy / dragact Goto Github PK

View Code? Open in Web Editor NEW

764.0 23.0 189.0 27.5 MB

a dragger layout system with React style .

License: MIT License

JavaScript 4.16% CSS 1.49% HTML 0.31% TypeScript 94.04%

react reactjs drag-and-drop drag-drop draggable grid grid-layout grid-system sortable sortable-lists

dragact's Introduction

特别声明

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

最后，我推荐的替换是：

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

Dragact 👋

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

贡献

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

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

有 bug?

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

LICENSE

MIT

dragact's People

Contributors

Stargazers

Watchers

Forkers

dive2pro supperjet mistery-li wz-fork lizibeite ok111net philipguo1992 tolly79 hehuangz xiecunjing closertb stay3hungry jymlbei xboxyan 635663429 leeeeeem zfang0620ls ameol duncup guochun ranihu liuronaldo9 andotorg catherinezhxj gracesu04133021 poundhu imelin cjchnwscqwsbsy 513205785xie haozhaohang wouldyouplace happyandyyang irene-wlp123 webzhe passionday jianganglu wangsen1989 liulinana maogirlsqueen weizhimin qhxin dktom1 zoro916 why633630 xiaoweizhi jaden-fan zc19941211 liangjianyu juneman azz1123 youky-msd yang123guo tuskiend dmcdoudou cjfweb ssdwawa zhangshuai0101 shimingzhao adimopoulos zhaofengping vernon5cui czf0321 holyjunhui mitcns qq459673705 tmzhappy niuyunfeng gatsbyy huhaoyang jaya-lee awexianshen zorrock z784324922 angelporo bry123 lavi2510 leiqiqi andyoung emibcn deleezhang sdgaoqiang cyc3w charsle wiiler king-lxt js-passion trumpusa tkxcrf xtt90 hjfeilg saul-tencer fyxwanan chivalrousalisa panmiaomiao95 dragonsoftzl shuaiboy wangmd xiaohuangtongxue crazycui candy0509

dragact's Issues

能不能有api支持只进行水平方向的拖拽和resize

水平方向进行占位处理，一行只能有一个元素，并且不能进行上下拖拽

内部组件的点击事件无法使用，另外在其他容器内包含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.

控件可以拖动互相重叠，然后点击下面被覆盖的控件让其放在最前端显示吗？

求水平交换功能

类似支付宝首页-更多页里，编辑我的应用的交互方式，在插入到dropdown的位置，不影响其他组件的原来顺序

报错了

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) {

How to run

在浏览器访问的时候，提示“Uncaught SyntaxError: Unexpected token *”
请教一下，这个库需要引入特殊的解释器么？

Dragact 的width能否根据屏幕的宽度自适

发现 width只能是number类型，如果设置100%，拖拽的时候会有问题

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有一些接口定义不对么

如何实现响应式布局，宽度只能实时监听然后改变宽度值吗？组件默认是往上挤，如何实现往左上挤？

如图，可见两个组件都在右边，然后左边大片留白了

希望以后能够支持在容器随意拖动元素,而不是往上挤,像安卓手机的图标那样

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>

更改组件数据，组件没有更新

在更新组件展示数据后，执行 setstate(),组件的展示数据还是旧数据(非坐标信息)，没有更新

点击官方文档显示404

无法访问官方文档，https://215566435.github.io/Dragact/ 这个地址也报404

如何从左边的框将缩略图拖到右边的展示框？

拖拽过来的元素大小可调节，怎么限制可调节范围

拖拽过来的元素大小可调节，怎么限制可调节范围，例如最小宽高，最大宽高

babelrc 的一点点小建议

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

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

有没有dragOver事件

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

缩放相关的api及实例

你好，请问关于缩放的api以及实例代码有吗

保存布局重新加载后布局混乱

Demo界面的存储布局示例挂掉了，我按照LayoutRestor示例自己编写了一段代码进行测试，但是恢复布局后布局是错乱的，不是保存时的样子。

ie11兼容性问题

请问兼容ie11吗？这边ie11打开控制台报错，有什么解决方案

自由度不够无法任意层级嵌套使用

BI图要实现这个随意拖放的效果但是这个嵌套其实是比较深的所以他并不一定是在children里面的这就会导致你这个拖放的效果会导致整个布局出错希望在这个基础上能独立出来一个item 让不管在哪一级那一层都可以直接进行使用

在ie11浏览器上控制台报错

The above error occurred in one of your React components:
in div (at Dragact.js:43)
in Unknown
in Unknown
in div
in Unknown (at Dragact.js:27)
in Unknown (at App.js:48)
in div (at App.js:35)
in Unknown (at index.js:7)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

'use strict'
import React from 'react';

import {Dragact} from 'dragact'

import styles from './Dragact.scss';

class DragactDemo extends React.Component {
  constructor(props) {
    super(props);

  }

  getblockStyle = (isDragging) => {
    console.log("isDragging", isDragging)
    return {
      background: isDragging ? '#ccc' : 'wheat'
    }
  }

  getLayout = (item, provided) => {
    console.log('item', item, provided)
  };

  render() {
    return (
      <Dragact
        layout={fakeData}
        col={1}
        rowHeight={40}
        margin={[15, 5]}
        padding={10}
        className='plant-layout'
        style={{background: "rgb(247, 221, 255)"}}
        canResize={true}
        onDragEnd={(item, provided) => this.getLayout(item, provided)}
      >
        {(item, provided) => {
          const blockStyle = this.getblockStyle(provided.isDragging);
          const styleDiv = Object.assign({}, provided.props.style, blockStyle, {width: ` calc(100% - 30px)`});
          console.log('styleDiv', provided, blockStyle, styleDiv)
          return (
            <div {...provided.props} {...provided.dragHandle} style={styleDiv}>
              {provided.isDragging ? '正在抓取' : '停放'}{item.key}
            </div>
          )
        }}
      </Dragact>
    );
  }
}

export default DragactDemo;


const fakeData = [
  {GridX: 0, GridY: 0, w: 1, h: 2, key: "0"},
  {GridX: 0, GridY: 0, w: 1, h: 2, key: "1"},
  {GridX: 0, GridY: 0, w: 1, h: 2, key: "2"},
  {GridX: 0, GridY: 0, w: 1, h: 2, key: "3"},
];