如何根据鼠标位置和jQuery UI Dragable向html文档添加控件？

我正在创建一个表单设计器，并且有一个包含按钮、文本框等图像的工具箱。 用户会将这些控件拖动到表单中，因此我使用jQuery

Draggable（）

。将该控件（或图像）放置在表单中的某个位置后，应将其返回到工具箱中的位置，然后应将一个实际控件插入到用户在表单中放置该控件的位置

这就是我所做的：

<div id="tools">
    <div id="draggables">
        <img class="tool" alt="Button" id="button" src="Data/Button.png" />
        <img class="tool" alt="TextBox" id="textBox" src="Data/TextBox.png" />
        <img class="tool" alt="RadioButton" id="radioButton" src="Data/RadioButton.png" />
        <img class="tool" alt="CheckBox" id="checkBox" src="Data/CheckBox.png" />
    </div>
    <img alt="Trash" id="trash" src="Data/trash.png" />
</div>

问题是：我应该在

draggable（）

（或任何其他地方）的末尾添加什么，以将指定的控件插入表单中的选定位置

---

非常感谢任何更好的解决方案。

这里有一个基于JQuery UI Dropable的实现示例

这与您的任务有相似的行为：复制到购物车后的物品返回到它的位置

但在复制多个表单元素时，需要解决添加唯一表单元素名称的问题

$(function () {
    $("#draggables").children().draggable();
});