calling draggable droppables events using triggers

calling draggable droppables events using triggers

I was wondering if anyone has done much by way of calling events on the UI widgets.

What I'd like to do is determine programmatically whether a drop event should be called. If an element is over a droppable element I'd like to be able to simulate the events that would happen if I were to release a draggable element over it. In the example below, by clicking the 'checker' element, if the 'dragitemecho' element is over the droppable then I'd like it to fire the event.

Thanks for any help anyone can be.

Please see code to illsutrate better
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script language="javascript" type="text/javascript" src="jquery-1.4.2.min.js"></script>
    <script language="javascript" type="text/javascript" src="jquery-ui-1.7.2.custom.min.js"></script>
    <script language="javascript" type="text/javascript">
        $(function() {

            $('#dragitemecho').draggable({
                stop: function(event, ui) {
                    alert('drag stop');
                }
            });

            $('li').droppable({
                drop: function(event, ui) {
                    alert('dropped');
                }
            });

            $('#checker').click(function(e) {
                $me = $('#dragitemecho');
                $('#dragitemecho').draggable('option', 'stop').call($me);
            });

        });

    </script>
    <style type="text/css">
    li {width:100px;height:100px;background-color:#999;}
    </style>
    </head>

    <body>
    <div id="dragitemecho" style="width:120px;height:50px;background-color:yellow;z-index:99999999;">drag echo</div>
    <div id="checker" style="width:120px;height:50px;background-color:blue;z-index:99999;">click</div>
    <ul>
    <li id="a">one</li>
    <li id="b">two</li>
    <li id="c">three</li>
    </ul>
    </body>
    </html>