foveluy/dragact

a dragger layout system with React style .

dragact's Issues

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

setState会引起重排

先拖拽改变之后， 其他组件调用setState方法的时候会引起重排

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

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>

demo 挂了

http://htmlpreview.github.io/?https://github.com/215566435/React-dragger-layout/blob/master/build/index.html
打不开

缩放相关的api及实例

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

How to run

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

this.props.children缺少判断

https://github.com/Foveluy/Dragact/blob/ee3474cdfdb4831a41836597773f60dace61fb50/src/lib/dragger/index.tsx

401行
return this.props.children(provided, dragMix, resizeMix)

这里缺少对children的判断 因为 有些有可能是以前的写法 不一定是用你这个新的写法

支持IE8+么？

拖动到外面后，如果数据变化，布局会出错

效果如图

当拖动条目到第一条位置时，如果这是数据变化，布局就只剩两条了
代码就在demo的NormalLayout稍作修改

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

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

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

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

dragact安装后，和antd的index样式冲突，页面布局错乱，antd按钮组件样式失效问题怎么解决

dragact安装后，和antd的index样式冲突，页面布局错乱，antd按钮组件样式失效问题怎么解决？

报错了

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

是否有可以直接搭配使用的栅格组件？

是否有可以直接搭配使用的栅格组件？

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

dva工程中引入失败，一直报Unexpected token *错误，能否指教下

babelrc 的一点点小建议

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

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

官方文档链接，404,有驴友已经提问一周了怎么不回复啊，以后插件维护还是不维护啊，堪忧。

有一个建议，如果页面布局已定，有的块大，有的块小，大块拖到小块的地方自动适应当前块的大小

有一个建议，如果页面布局已定，有的块大，有的块小，大块拖到小块的地方自动适应当前块的大小，进入这个位置

click事件与move事件重叠

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

源代码压缩算法缺少横向压缩

我看源代码中compactItem只是纵向操作gridY 缺少横向压缩的算法。

自己后来实现了一般比较简单的横向压缩算法=》react-grid-layout-between

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

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

在示例中的增删演示，如果把所有item都删除了会报错

我在项目中首先遇到了这个问题，一开始以为是自己代码问题，但是去到官方示例上尝试，遇到了同样的问题。
报错信息如下：（截图至官方示例）

自己用的是v0.2.8的版本的

有没有dragOver事件

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

区块能否绝对px 大小

您的这个插件和reacr-grid-layout 十分相似 都是栅格化网格布局 大致思路都是对外部进行分割成N列 这样的话等于说是按最外层百分比控制区块宽度 那么我现在有个疑问 能不能做成区块大小是固定的 比如说一个区块是400px*600px 那么外面的大小不影响区块的大小 外部最小宽度由内部区块最大宽度决定

有没有办法根据组件内容自适应调整grid高度

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

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

ie11兼容性问题

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

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

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

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

官方文档404。。咋回事

English Doc?

I have seen some react-dnd libraries, and I really like the look and feel of the examples of this package, but: Language its a problem, is there a chance of an English doc for this repo?

全部删除报错

将全部的数据删除掉，layout中数据为[] 空数组的时候报错！大神解决一下呗

能否提供参数禁止拖拽

能否提供参数禁止拖拽

点击官方文档显示404

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

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

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

怎么获取排序后的数据啊....没看到排序之后的数据获取接口

怎么控制内部组件内容和每个可拖拽控件自适应

求水平交换功能

看到了这个组件，很顺滑，但是子集貌似没有水平拖拽，都需要向下挤出一个单位的空间，这样需要操作两次，很难受

在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"},
];

当子项足够大时无法缩小

拖动改变尺寸时，会有一个阴影，表示最终的大小，发现当子项尺寸很大时，阴影的尺寸也很大，就无法缩小了，是否能定义阴影的大小？
录了屏，我拖动后往上缩，但是最终还是向下变大了
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

在antd pro中使用dragact导致antd样式部分失效，估计原因是因为把 umi 的 css merge 给挂掉了，请问能否帮忙修复该问题 @Foveluy

layout.map遍历出错

dragact.js文件 this.props中并没有layout属性，请问这个layout是做什么用的

在dragend事件中修改layout的问题

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

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

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

求水平交换功能

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

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

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

学习怎么把布局里面的内容获取到，比如表格，折线图等，以便下次加载