Javascript JQuery可拖动表单生成器

我正在尝试做一些类似的东西

目前，我已经取得了一些进展。我制作了一个侧边栏，它将列出不同的表单元素，并且我制作了侧边栏，以便可以将这些元素拖放到表单容器中

到目前为止，这就是它的样子

这就是我正在努力实现的目标，但遇到了困难。目前，我只是简单地显示如下元素

<li class="list-group-item draggable"><span class="fm-textbox-icon"></span>Text Box</li>

文本框 因此，它不包含任何表单代码。因此，当我把它拖到我的表单容器上时，我真的不想使用克隆。相反，如果它是一个文本框，他们拖过来，它应该创建以下内容

<div class="form-group">
    <label class="col-sm-5 control-label green" for="fieldName">Field Label:</label>
    <div class="col-sm-7">
        <input id="fieldName" class="form-control" type="text" name="fieldName">
    </div>
</div>

字段标签：

这意味着我需要在拖动的表单元素中添加一些字段属性（标签、大小等），就像我在第一个示例中看到的那样。我已经看过了第一个例子中的代码，其中有很多

有什么方法可以简化这个过程吗？我基本上是想以更小的规模构建示例中的内容

非常感谢任何帮助我实现这一目标的建议

---

非常感谢

我认为您需要可排序而不是可拖动我认为您需要可排序而不是可拖动