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

Question

我正在创建一个表单设计器并有一个包含按钮、文本框等图像的工具箱。 用户会将这些控件中的每一个拖到表单中，因此我使用的是 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>

然后:

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

问题是:我应该在 draggable()(或其他任何地方)的末尾添加什么以将指定的控件插入在表单中选择的位置？

如有更好的解决方案，我们将不胜感激。

Answer 1

有实现实例Shoping Cart基于 JQuery UI droppable。

这与您的任务具有相似的行为:将项目复制到购物车后返回原位。

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