foveluy / dragact Goto Github PK
View Code? Open in Web Editor NEWa dragger layout system with React style .
License: MIT License
a dragger layout system with React style .
License: MIT License
你好,请问关于缩放的api以及实例代码有吗
无法访问官方文档,https://215566435.github.io/Dragact/ 这个地址也报404
拖动改变尺寸时,会有一个阴影,表示最终的大小,发现当子项尺寸很大时,阴影的尺寸也很大,就无法缩小了,是否能定义阴影的大小?
录了屏,我拖动后往上缩,但是最终还是向下变大了
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
我看到api中没有dragOver事件,现在有一种需求就是跟手机桌面app一样,有一些应用和大小不一的小部件,不想拖拽排版,这个插件可以满足,但是手机桌面还有一种是应用之间拖拽可以创建文件夹。
--------------------
看了下until里面的源码和React-Grid-Layout的源码,发现原来用的是碰撞检测。
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>
<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 会报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.
拖拽过来的元素大小可调节,怎么限制可调节范围,例如最小宽高,最大宽高
想做一个拖拽merge两个子组件的东西,所以需要在dragend中修改layout。
假设拖拽A到B内,生成一个merge后的B。无非是移除layout 中的A,以及修改layout中的B。
这个时候存在两个问题:
1、react报一个在unmount的组件上调用setstate的警告
2、此后getLayout api拿到的layout中B的信息是就旧的
在浏览器访问的时候,提示“Uncaught SyntaxError: Unexpected token *”
请教一下,这个库需要引入特殊的解释器么?
能否提供参数禁止拖拽
自己后来实现了一般比较简单的横向压缩算法=》react-grid-layout-between
水平方向进行占位处理,一行只能有一个元素,并且不能进行上下拖拽
Demo界面的存储布局示例挂掉了,我按照LayoutRestor示例自己编写了一段代码进行测试,但是恢复布局后布局是错乱的,不是保存时的样子。
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"},
];
BI图要实现这个随意拖放的效果 但是这个嵌套其实是比较深的 所以他并不一定是在children里面的 这就会导致你这个拖放的效果会导致整个布局出错 希望在这个基础上能独立出来一个item 让不管在哪一级 那一层都可以直接进行使用
是否有可以直接搭配使用的栅格组件?
看到了这个组件,很顺滑,但是子集貌似没有水平拖拽,都需要向下挤出一个单位的空间,这样需要操作两次,很难受
401行
return this.props.children(provided, dragMix, resizeMix)
这里缺少对children的判断 因为 有些有可能是以前的写法 不一定是用你这个新的写法
将全部的数据删除掉,layout中数据为[] 空数组的时候报错!大神解决一下呗
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?
类似支付宝首页-更多页里,编辑我的应用的交互方式,在插入到dropdown的位置,不影响其他组件的原来顺序
下个月我可能会研究一下 rollup + ts 然后过来提 pr
您的这个插件和reacr-grid-layout 十分相似 都是栅格化网格布局 大致思路都是对外部进行分割成N列 这样的话等于说是按最外层百分比控制区块宽度 那么我现在有个疑问 能不能做成区块大小是固定的 比如说一个区块是400px*600px 那么外面的大小不影响区块的大小 外部最小宽度由内部区块最大宽度决定
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) {
dragact.js文件 this.props中并没有layout属性,请问这个layout是做什么用的
在更新组件展示数据后,执行 setstate(),组件的展示数据还是旧数据(非坐标信息),没有更新
有一个建议,如果页面布局已定,有的块大,有的块小,大块拖到小块的地方自动适应当前块的大小,进入这个位置
先拖拽改变之后, 其他组件调用setState方法的时候会引起重排
dragact安装后,和antd的index样式冲突,页面布局错乱,antd按钮组件样式失效问题怎么解决?
发现 width只能是number类型,如果设置100%,拖拽的时候会有问题
请问兼容ie11吗?这边ie11打开控制台报错,有什么解决方案
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.