具有可调整大小元素的 HTML 拖放仪表板

Question

我正在尝试开发一种控件，其中必须能够添加元素、移动元素并调整它们的大小。这个想法是通过将一些元素拖动到仪表板来绘制小图表。这是我想要实现的目标：

• 仪表板必须有固定的边界（左/右/下/上）。元素应该与它们碰撞而不是超越。

• 可以使用按钮添加元素或从存储库中拖动元素

• 元素必须可调整大小

• 元素应该碰撞

• 元素必须是可移动的 - 自由式，而不是像 gridster 或 gridstack 那样在顶部进行调整。我需要能够将一个元素放在仪表板的底部或中间，并留有空白空间。

• 我必须能够从元素中获取所有必要的数据，以便存储和重新创建仪表板（保存和加载）。

我首先使用拖放功能创建这个小型测试项目，但很快就感觉我正在尝试重新发明轮子，并且可能以一种不必要的老式方式来做。

但经过几次搜索后，我仍然没有找到一个插件/控件能够按照我需要的方式运行或者足够容易让我更改。

Gridster 和 gridstack 使元素位于顶部。TinyDraggable 看起来不错，但不能调整大小。我确实尝试使 div 元素 .ressized() （添加 jQueryUI），但我无法使其工作。这个插件没有（我认为）冲突，如果我设法获得所需的其他一切，那就没问题了。与我的小项目相比，我确实喜欢可拖动项目的自由移动，它们从一个插槽移动到另一个插槽。

所以，问题是：你知道是否有适合我的插件（jQuery）？准备好使用还是易于配置/更改？

非常感谢

Answer 1

尝试使用https://github.com/troolee/gridstack.jsfloat模式。在这种模式下，小部件不会到达容器的顶部。

该库正在积极开发中。所以我可以实现缺失的合理功能。