3

我正在创建一个表单设计器，并有一个包含按钮、文本框等图像的工具箱。用户将这些控件中的每一个拖到表单上，所以我使用的是 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()（或其他任何地方）添加什么以将指定的控件插入表单中的选定位置？

任何更好的解决方案表示赞赏。

4

1 回答 1

1

有基于 JQuery UI droppable实现购物车的示例。

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

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

于 2012-06-13T23:45:50.760 回答