jQuery, draggable, droppable, dynamic controls
I have next kind of 'controls bar':
<ul>
<li class="draggable">
<div class="container" id="control[1][0]" >
<input type="text" name="control[1][0]" value="control type 1
number 1 value" />
</div>
</li>
<li class="draggable">
<div class="container" id="control[2][0]">
<textarea name="control[2][0]" rows="5" cols="50">Control 2
number 1 value</textarea>
</div>
</li>
</ul>
I need to drag control (element div.container) to 'controls list':
<ul id="sortable"><ul>
copying control from control bar to controls list.
How should I do that ?
$(function() {
$("#sortable").sortable({
revert: true,
placeholder: 'ui-state-highlight',
distance: 30,
});
$(".draggable").children().draggable({
connectToSortable: '#sortable',
helper: 'clone',
revert: 'true'
})
});
Is somewhere any similar already implemented functionality ?
Thnak you !