drag drop manually trigger event drop

drag drop manually trigger event drop


I have a normal drag drop plus an option select box, when the user
clicks on a selection I would like the item to appear in the "dropped"
container... so apart from the normal drag drop stuff I have added
this
$("#custom_draggable").draggable({
revert:'invalid',
helper:'clone',
cursor: 'move',
scope: 'things'
});
and my drop box looks like this
    $chosen.droppable({
scope: 'things',
         drop: function(event, ui) {
alert("in drop ui is " +
ui);
addItem(ui.draggable);
            }
        });
// normal drag drop works fine
function addItem($item) {
var $list = $('ul',$chosen).length ? $('ul',$chosen) : $
('<ul class="ui-helper-reset"/>').appendTo($chosen);
$item.clone().draggable
({revert:'invalid',cursor:'move',}).appendTo
($list);
}
add_to_selected= function(){
var $citem=$('#custom_draggable li'); // my dummy node
// here i change some stuff like the value all fine etc
$citem.trigger("drop",$citem); // THIS BIT DOESN'T WORK
}
in my html I have
// a dummy object to add to my "chosen" drop box
<ul class="hidden" id="custom_draggable">
<li> <h3 name="pass_type">None</h3> </li>
</ul>
<table>
<tr>
<td> <input style="display:inline" type="text" id="custom_pass" />
</td>
<td>
<button style="display:inline" type="button" onclick="add_to_selected
()"> Add</button>
</td>
</tr>
</table>
This bit is wrong but I am not sure how to call it
$citem.trigger("drop",$citem);
in the definition of the function
drop: function(event, ui)
what event is being called , and what exactly is ui?
Any help gratefully received... perhaps there is a much easier way to
do this???