search

Foveluy / Dragact

a dragger layout system with React style .
MIT License
764 stars 188 forks source link

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

Closed junjiexing closed 6 years ago

junjiexing commented 6 years ago

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

Foveluy commented 6 years ago

@avdbg 给你带来不便很不好意思，不是因为挂掉，而是因为不兼容老版本了，因为可能你之前访问玩过。有个快速解决的办法就是到调试模式里，删掉你的localstorage里的缓存，重新加载就可以了。要修复也不是不能，我晚一点时间修复一下这个。

junjiexing commented 6 years ago

清空了确实可以了，谢谢。

junjiexing commented 6 years ago

不过还有有一个问题，我觉得因为Dragact空间的宽度只能是数字导致的。 我希望可拖拽区域的大小不是固定的，而是根据不同的窗口宽度自动调整，所以用了 https://github.com/ctrlplusb/react-sizeme 但是这样似乎会导致重新加载布局出问题，所有Item都挤到左边了。

Foveluy commented 6 years ago

@avdbg 自动调整宽度的想法我还在构思，不知道你有什么建议。

junjiexing commented 6 years ago

刚才忽然想到可能是react-sizeme在开始的时候传入了一个为0的宽度导致的，测试了一下如果判断宽度大于0再加载布局就不会有这个问题了。

junjiexing commented 6 years ago

我建议把react-sizeme的功能整合在Dragact中，在Dragact空间中自动将宽度转换为多少px应该可行。

Foveluy commented 6 years ago

@avdbg 非常感谢，稍微晚点的时间，我看一下react-sizeme

FailLone commented 6 years ago

在width、col、rowHeight等props变化时，子组件重算下style就能很好地满足resize时自动调整布局的需求。目前是没有重算style的。 但是，Dragact依然非常棒！

Foveluy commented 6 years ago

@avdbg @FailLone 谢谢你们中肯的建议，我昨晚认真看了一下以后，决定加入响应式的布局方式，实现难度不大，应该能在今天做好。

Foveluy commented 6 years ago

@avdbg @FailLone

已经做好了，可以尝试一下demo

FailLone commented 6 years ago

@215566435 resize的时候有个console忘记去啦~

junjiexing commented 6 years ago

好像跟原来想象的不是太一样，我觉得缩放时只是缩放可拖拽区域，item的宽度不变，效果应该会更好一些。

Foveluy commented 6 years ago

@avdbg 我现在已经修改成：在width、col、rowHeight等props变化时，子组件重算下style就能很好地满足resize时自动调整布局。

我大概，明白你的效果了。

  1. 因为计算item宽度的时候，依赖了容器的width，col这两个属性。
  2. 如果你要实现我觉得缩放时只是缩放可拖拽区域，item的宽度不变，效果应该会更好一些，这样的效果，你应该控制width和col属性同时变化。

以下是width和col的解释：

width

容器的宽度

col

把容器切分为col个格子

晚点的时候，我可以做一个demo.