CODEWITHSUNDEEP
jqueryhtmljquery-uijquery-ui-draggable
Mouliyan
Mouliyan

Reputation: 470

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.

Upvotes: 3

Views: 206

Answers (1)

DaneSoul
DaneSoul

Reputation: 4511

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.

Upvotes: 1

Related Questions