javascript - 带有可调整大小元素的 HTML 拖放仪表板

Question

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

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

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

• 元素必须可以调整大小

• 元素应该碰撞

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

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

我开始创建 this small test project使用拖放功能，但很快我就觉得我正在尝试重新发明轮子，并且可能以一种不必要的老式方式进行。

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

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

所以，问题是:你知道有没有适合我的插件(jQuery)？准备好使用还是易于配置/更改？

非常感谢

Answer 1

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

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