trigger syntax in UI does not appear to work

trigger syntax in UI does not appear to work

I am trying to programmatically call the dragstop event of a draggable but it does not appear to work with the syntax I'd expect. When I use a different syntax it does not pass through any event or ui details so I don't seem to be able to access these parameters. I have posted a similar question here - http://forum.jquery.com/topic/calling-draggable-droppables-events-using-triggers - but I felt this is a more fundamental issue and so decided to post it separately. I trust this is okay.

Other post

  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.8rc3.custom.min.js"></script>
    <script language="javascript" type="text/javascript">
        $(function() {

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


            $('#checker').click(function(e) {
                //does not work.
                $('#dragitemecho').trigger('dragstop');
                
                //works.
                //$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>

    </body>
    </html>