Comments (13)
@avdbg
@FailLone
谢谢你们中肯的建议,我昨晚认真看了一下以后,决定加入响应式的布局方式,实现难度不大,应该能在今天做好。
from dragact.
@avdbg 给你带来不便很不好意思,不是因为挂掉,而是因为不兼容老版本了,因为可能你之前访问玩过。有个快速解决的办法就是到调试模式里,删掉你的localstorage里的缓存,重新加载就可以了。要修复也不是不能,我晚一点时间修复一下这个。
from dragact.
清空了确实可以了,谢谢。
from dragact.
不过还有有一个问题,我觉得因为Dragact空间的宽度只能是数字导致的。
我希望可拖拽区域的大小不是固定的,而是根据不同的窗口宽度自动调整,所以用了
https://github.com/ctrlplusb/react-sizeme
但是这样似乎会导致重新加载布局出问题,所有Item都挤到左边了。
from dragact.
@avdbg 自动调整宽度的想法我还在构思,不知道你有什么建议。
from dragact.
刚才忽然想到可能是react-sizeme在开始的时候传入了一个为0的宽度导致的,测试了一下如果判断宽度大于0再加载布局就不会有这个问题了。
from dragact.
我建议把react-sizeme的功能整合在Dragact中,在Dragact空间中自动将宽度转换为多少px应该可行。
from dragact.
@avdbg 非常感谢,稍微晚点的时间,我看一下react-sizeme
from dragact.
在width、col、rowHeight等props变化时,子组件重算下style就能很好地满足resize时自动调整布局的需求。目前是没有重算style的。
但是,Dragact依然非常棒!
from dragact.
@avdbg
@FailLone
已经做好了,可以尝试一下demo
from dragact.
@215566435 resize的时候有个console忘记去啦~
from dragact.
好像跟原来想象的不是太一样,我觉得缩放时只是缩放可拖拽区域,item的宽度不变,效果应该会更好一些。
from dragact.
@avdbg 我现在已经修改成:在width、col、rowHeight等props变化时,子组件重算下style就能很好地满足resize时自动调整布局。
我大概,明白你的效果了。
- 因为计算item宽度的时候,依赖了容器的width,col这两个属性。
- 如果你要实现
我觉得缩放时只是缩放可拖拽区域,item的宽度不变,效果应该会更好一些
,这样的效果,你应该控制width和col属性同时变化。
以下是width和col的解释:
width
容器的宽度
col
把容器切分为col个格子
晚点的时候,我可以做一个demo.
from dragact.
Related Issues (20)
- 希望以后能够支持在容器随意拖动元素,而不是往上挤,像安卓手机的图标那样
- click事件与move事件重叠
- 控件可以拖动互相重叠,然后点击下面被覆盖的控件让其放在最前端显示吗? HOT 1
- English Doc? HOT 1
- 拖拽过来的元素大小可调节,怎么限制可调节范围
- this.props.children缺少判断
- 自由度不够 无法任意层级嵌套使用
- 全部删除报错 HOT 1
- demo 挂了
- 当子项足够大时无法缩小
- 拖动到外面后,如果数据变化,布局会出错 HOT 1
- setState会引起重排
- 支持IE8+么?
- dragact
- dragact安装后,和antd的index样式冲突,页面布局错乱,antd按钮组件样式失效问题怎么解决 HOT 1
- 在antd pro中使用dragact导致antd样式部分失效,估计原因是因为把 umi 的 css merge 给挂掉了,请问能否帮忙修复该问题 @Foveluy HOT 2
- 报错了
- Table固定的列有没有components属性
- node v9.11.2 版本下报错
- 当内容全部删除的时候,报错:Cannot read properties of undefined (reading 'GridY')
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from dragact.