How to add controls to html document based on mouse position and jQuery UI Draggable?

I am creating a form designer and have a toolbox that contains images of button, textbox etc. The user will drag each of these controls to the form, so I am using jQuery Draggable() . After dropping somewhere in the form this control (or image) should return back to its place in toolbox then a real control should be inserted into the position that user dropped the control in the form.

This is what I did:

<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>

then:

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

The problem is: what should I add to the end of draggable()(or anywhere else) to insert the specified control into the selected position in the form?

any better solution is appreciated.

Answers


There is example of realization Shoping Cart on base of JQuery UI droppable.

This have similar behavour to your task: item after copy to cart return on it's place.

But you will need to solve problem with adding unique forms elements names when copy several form elements.


Need Your Help

Sqlite android add character field

android sql sqlite

I am having a problem with my sqlite query. I have table like this

Dropdowmenu: Align submenus to their parents dynamically with JQuery

jquery html5 css3 drop-down-menu

I have a dropdown menu where what i want to do is to change the padding left of the submenu dynamically so the parent and the sibling (the submenu) are aligned vertically.