挖空和 JQuery UI 拖放表单构建器

knockout and JQuery UI drag and drop form builder

本文关键字：表单 构建 拖放 UI JQuery      更新时间：2023-09-26

我想使用挖空和JQuery UI实现一个表单构建器。

我找到了 Knockout 可排序插件以及更多材料，并为表单构建器实现了一个框架。

基本上，我有一个可观察的数组，它保存了我所有可用的字段类型及其专有性，另一个数组保存了已添加到表单中的控件。我添加了一个绑定，只需单击它即可为我添加一个字段，这样它就可以节省快速用户拖放的时间。此外，添加的字段上的单击事件将转到字段详细信息（现在仅显示警报）。

我想为添加到表单中的每个表单元素分配一个 id。如果将另一个元素添加到表单中，则它应该具有递增的id，如果表单中的元素被重新排列，则元素的id也应更改。

我的问题是我应该在哪里以及如何执行此 ID 分配，然后重新分配，以便每次添加新字段或围绕表单元素的 id 移动时，都会按连续顺序排列。

我假设我可以为绑定处理程序中的每个删除元素分配一个 id，但之后我该如何控制它？

$(element)[0].id = 'field-nr-' + globalVariable++;

这也意味着我必须更改淘汰可排序插件，我试图避免的女巫。

代码在这个小提琴中： http://jsfiddle.net/razvangl/z52G7/

如果我

理解正确，那么您可能会使用在foreach中绑定时可用的$index可观察量。

因此，您将绑定如下内容：

<table style="width : 100%" data-bind="attr: { id: 'field-nr-' + $index() }" >

当您拖动字段时，id 将根据其在可观察数组中的位置保持更新。

我更新了

您的小提琴（并更新了KO版本）以显示td中的值：http://jsfiddle.net/rniemeyer/56PLd/

相关文章：